The future of Animations with Web Animation API

Chi Siamo

Francesco Strazzullo

Alessandro Violini

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"

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

Web Animations API lets us create animations with just plain JavaScript 

Can I use it?

Welcome Polyfill

That's It!

@TheStrazz86

@Violo

Thanks!