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