CSS Animations
and
Web Animations API
CSS Animations
less janky compared to JS animation
browser gets to decide how to optimize
CSS animations are easy to create
CSS Animations Advantages
@keyframes
@keyframes slidein {
from {
margin-left: 10%;
}
to {
margin-left: 90%;
}
}@keyframes
@keyframes slidein {
0% {
margin-left: 10%;
}
100% {
margin-left: 90%;
}
}animation
@keyframes slidein {
0% {
margin-left: 0%;
}
100% {
margin-left: 50%;
}
}
.sliding {
animation: slidein 2s;
}
Web Animations API
element.animate
element.animate([
// keyframes
{ transform: 'translateY(0px)' },
{ transform: 'translateY(-300px)' }
], {
// timing options
duration: 1000,
iterations: Infinity
});
Animation
methods
const animation = element.animate([
// keyframes
], {
// timing options
});
// Animation methods
animation.pause()
animation.play()
// Event handlers
animation.onfinish = () => handleFinish()
React Web Animation
https://github.com/bringking/react-web-animation
react-web-animation
import { Animation } from 'react-web-animation'
class Ball extends Component {
bounceHeight = t => {
// same as previous example
}
getKeyFrames = () => {
// same as previous example
}
render() {
return (
<Animation
keyframes={this.getKeyFrames()}
timing={this.getTiming(1400)}>
<div id="ball"/>
</Animation>
);
}Performance
The transform and opacity animations do not affect normal flow or DOM environment.
GPU will handle animate movement, scaling, rotation, opacity and affine transforms
Offloading to the GPU
avoid animating color, margin, padding, top, bottom, etc...
Browser Support
Polyfill
https://github.com/web-animations/web-animations-js
Summary
CSS Animations
simple animations
complex animations
Web Animations API
Thanks!
CSS Animations and Web Animations API
By Ed Atrero
