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!

Made with Slides.com