It’s a way to transform the element in either a 2d or 3d form but manipulating them on their axis’.
I liked the last example they provided that was the 3d multi-layered spinning. I imagine (albeit a very intricate and relatively elaborate example) a model of a globe spinnng on it’s axis.
A transition allows a developer to shift between two values over a specified period of time. Transitions can be applied to multiple aspects of the element, such as color or shape.
Transition:
- Needs a triggering element (:hover, :focus etc.)
- Only 2 animation states (start and end)
- Used for simpler animations (buttons, dropdown menus and so on)
- Easier to create but not so many animation/effect possibilities
Animation @keyframes:
- It can be used for endless animations
- Can set more than 2 states
- No boundaries
https://stackoverflow.com/questions/20586143/css-animation-vs-transition
It helps to engage the user, to make the site more visually interesting and helps to draw attention to key points.
There are quite a few little tricks, that seem like they could have a lot of applications to make a website more fun to interact with and also make it more easy to show the users how to use the site itself, to make it easier to navigate. It also seems like a lot of these are just premade code that you could google and be able to snag them from different sites.