The future of Animations with Web Animation API
coding to enjoy
coding to work out
How do we animate things with CSS?
Two ways to move elements
but only one is an "Animation"
Transitions allows you to change property values smoothly
Transition + Transform
translateX() - scaleX() - rotateX()
translateY() - scaleY() - rotateY()
translateZ() - scaleZ() - rotateZ()
An animation lets an element gradually change from one style to another
You can change as many CSS properties you want, as many times you want
The @keyframes rule
specifies the animation code.
The animation is created by gradually changing
from one set of CSS styles to another.
What if we need to choose the color at runtime?
What If we need to do something when the animation is completed?
with pure CSS we have independent movement or single object timeline
WE NEED A PAGE TIMELINE
Can I use it?