• CSS Animations
• SVG Animations
• JavaScript Animations (requestAnimationFrame, Canvas, WebGL, etc.)
• Flash (becoming obsolete)

.red.square { transition: transform 2s ease-in-out; }
.red.square:hover { transform: rotate(360deg); }

.yellow.square:hover { animation: spin 2s ease-in-out; }
@keyframes spin {
  100% { transform: rotate(360deg); }
}

• Simple & effective
• Declarative
• Not tied to the main thread
• Simple play/pause controls for keyframe animations
• No dynamic modification or definition of animation content
• No primitives for synchronising different animations playing together
• Cannot stack multiple animations on top of each other

<animatetransform
  attributeName="transform"
  attributeType="xml"
  type="rotate"
  from="0deg"
  to="360deg"
  dur="2s"
  repeatCount="indefinite"
></animatetransform>

• Declarative
• Has playback controls
• Can synchronise animations together
• Entire SVG is treated as a single animation
• Cannot dynamically modify animation content
• Sees very little use on the web
• Does not integrate with HTML content
• Implementations are lacking compared with CSS Animations
  • Missing cross browser support
  • Fewer performance optimisations

function frame(time) {
  document.querySelector('.blue.square').style.transform =
      'rotate(' + (Math.sin(time / 1000) * 360) + 'deg)';
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

• Total control over the animation
• Access to powerful graphical tools (Canvas & WebGL)
• Portable (even beyond the web)
• Must run on the main thread
• Procedural, not declarative

• Different APIs have different models for animation
• Unnecessary maintenance to support multiple ways of doing the same thing
• A hassle for web developers to learn multiple techniques
• No way to synchronise different animation techniques together
• Not easy for JavaScript to set up declarative animations

• Mozilla
• Google
• Adobe
• W3C: CSS-SVG Effects Task Force (FXTF)

• Provides a common model for CSS and SVG animations
• Allows different animation technologies to coordinate together
• Allows for future animation specs to integrate with the same model
  (media integration, Layout Animations)
• Provides a JavaScript API for defining animations declaratively
• Animations are not tied to the main thread
• Makes HTML animations a more compelling alternative to Flash

A simple example

element.animate({transform: 'rotate(360deg)'}, 2);

More complex timing

element.animate(
    {transform: 'rotate(360deg)'},
    {
      direction: 'alternate',
      duration: 1,
      iterations: 4
    });

More complex timing

element.animate(
    {transform: 'rotate(360deg)'},
    {
      direction: 'alternate',
      duration: 1,
      iterations: Infinity,
      easing: 'ease-in-out',
      playbackRate: 2
    });

Without the syntactic sugar

document.timeline.play(
  new Animation(
    element,
    new KeyframeAnimationEffect([{transform: 'rotate(360deg)'}]),
    {duration: 2}));

Parallel animation grouping

document.timeline.play(new ParGroup([
  new Animation(parItem1, [{width: '0px'}, {width: '600px'}], 1),
  new Animation(parItem2, [{width: '0px'}, {width: '800px'}], 1),
  new Animation(parItem3, [{width: '0px'}, {width: '200px'}], 1),
]));

Sequential animation grouping

document.timeline.play(new SeqGroup([
  new Animation(seqItem1, [{width: '0px'}, {width: '300px'}], 1),
  new Animation(seqItem2, [{width: '0px'}, {width: '400px'}], 1),
  new Animation(seqItem3, [{width: '0px'}, {width: '100px'}], 1),
]));

Nested grouped animations

Nested grouped animations

document.timeline.play(new SeqGroup([
  new Animation(outerSeqItemFirst, [{width: '0px'}, {width: '300px'}], 1),
  new ParGroup([
    new Animation(innerParItem1, [{width: '0px'}, {width: '300px'}], 1),
    new Animation(innerParItem2, [{width: '0px'}, {width: '380px'}], 1),
    new Animation(innerParItem3, [{width: '0px'}, {width: '100px'}], 1),
  ]),
  new Animation(outerSeqItemLast, [{width: '0px'}, {width: '100px'}], 1)
]));

Path animations

Path animations

var svgPathData = 'M 100 200' +
                  'C 200 100 300   0 400 100' +
                  'C 500 200 600 300 700 200' +
                  'C 800 100 900 100 900 100';
var pathAnimation = new Animation(
    chromeLogo,
    new PathAnimationEffect(svgPathData, 'auto-rotate'),
    {
      duration: 1,
      direction: 'alternate',
      easing: 'ease-in-out',
      iterations: Infinity,
    });
document.timeline.play(pathAnimation);

Playback control

var player = document.timeline.play(pathAnimation);
player.paused = true;
seekSlide.onmousemove = function(event) {
  player.currentTime = (event.clientX - seekSlide.offsetLeft) / seekSlide.clientWidth;
};

Custom animation effects

function customAnimationEffect(timeFraction, iteration, target) {
  output.textContent = 'timeFraction: ' + timeFraction.toFixed(2);
                       'iteration: ' + iteration + '\n' +
}
document.timeline.play(
  new Animation(
    null,
    customAnimationEffect,
    { duration: 2,            direction: 'alternate',
      easing: 'ease-in-out',  iterations: Infinity }));

dictionary TimingInput {
    double                             delay = 0;
    double                             endDelay = 0;
    FillMode                           fill = "auto";
    double                             iterationStart = 0.0;
    unrestricted double                iterations = 1.0;
    (unrestricted double or DOMString) duration = "auto";
    double                             playbackRate = 1.0;
    PlaybackDirection                  direction = "normal";
    DOMString                          easing = "linear";
    EasingTimesInput                   easingTimes = "distribute";
};

• Specification at First Public Working Draft: www.w3.org/TR/web-animations
• Chrome:
  • CSS Transitions & Animations rewritten on top of the Web Animations model
  • JavaScript API in development behind a flag
• Firefox & Safari: Started implementation
• IE: No public signals

• A JS implementation of the API
• Allows developers to use the technology on browsers that don't yet support it
• Available on Github: github.com/web-animations/web-animations-js
• Please try it out!