How do we animate things with CSS?

Two ways to move elements
but only one is an "Animation"

CSS Transition

Transitions allows you to change property values smoothly

transition-property
transition-duration
transition-delay
transition-timing-function

transition-timing-function:

cubic-bezier(0.25,0.1,0.25,1)

Transition + Transform

Transform 2D

translate()

rotate()

scale()

skewX()

skewY()

Transform 3D

translateX() - scaleX() - rotateX()

translateY() - scaleY() - rotateY()

translateZ() - scaleZ() - rotateZ()

CSS Animation

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

animation-name
animation-duration
animation-delay
animation-timing-function

animation-direction
animation-fill-mode
animation-iteration-count
animation-play-state

@keyframe

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?

Custom properties

What If we need to do something when the animation is completed?

transitionEvent

transitionend

https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent

with pure CSS we have independent movement or single object timeline

WE NEED A PAGE TIMELINE

Can I use it?

Welcome Polyfill

https://github.com/web-animations/web-animations-js