This document provides an overview of the history and core concepts of web animations. It discusses how the Web Animations API underlies CSS animations and transitions. It covers keyframe effects, timing models, and animation constructors. Interactive examples are provided for animation playback controls, callbacks, and randomizing animations. The document also explores concepts like playback rate and how the API could enable future specs.

1. with
@RachelNabors
& Alice

2. devtoolschallenger.com

3. lightningdesignsystem.com/design/motion

5. It’strue.rachelthegreat.com

9. rachelnabors.com/alice-in-
videoland/book

12. History
GOSSIP
OMG!!!1!

13. Birth of SMIL, 1999
SMIL

14. Birth of CSS Anima5ons and Transi5ons, 2009
CSS
Transi-ons
CSS
Anima-ons

15. CSS
Transi-ons
CSS
Anima-ons
SMIL
Seriously?
Internet Explorer’s Reac5on

16. One API to Rule Them All
CSS
Transi-ons
CSS
Anima-ons
SMIL
?

17. Some years later…

18. ?
Web
Anima-ons
API
CSS
Transi-ons
CSS
Anima-ons
SMIL

19. CSS
Transi-ons
CSS
Anima-ons
SMIL
?
Web
Anima-ons
API
la mort de SMIL, 2015

20. FirefoxDeveloperEdition

23. Core
Concepts

24. The Timing & Anima5on Models
The When The What

25. Timing

26. the Cheshire Cat’s 5meline
there
0 seconds
not all
there
8 seconds4 seconds2 61 3 5 7

27. “Time may be shi2ed backwards
and forwards, scaled, reversed,
paused, and repeated.”
–Web Animations API spec

28. Stateless Animation
Frame Rate Independent
Direc0on Agnos0c
Seek-able
In-synch no ma<er what

29. cdpn.io/MwYMJe

30. Animation

31. 0 seconds 8 seconds4 seconds2 61 3 5 7
there not all
there
the Cheshire Cat’s 5meline
Keyframe Effect

32. Interac5on Development
Tradi5onal Anima5on
tweenskeyframe keyframe
key keyin-betweens

33. Do you evenremember me?
KeyframeEffect
Anima-on

34. Timing Anima-on

35. Web
Anima-ons
API
CSS
Transi-ons
CSS
Anima-ons
SMIL
Web Anima5ons API underlies both
CSS Anima5ons and Transi5ons

36. CSS
Animations
& Transitions
WEB
ANIMATIONS API

37. I’ve a
CSS AnimaCons
& TransiCons course…
rachelnabors.com/
css-animaCons-course
20% off with
LETSANIMATE

38. KeyframeEffect
Anima-on

39. KeyframeEffect
Constructor

40. 0% 8 seconds4 seconds2 61 3 5 7
there not all
there
Keyframe Effect

41. cdpn.io/adVpaX

42. #rabbit {
transition: transform 3s;
}
#rabbit.interacted {
transform: translateY(100%);
}

43. cdpn.io/eJyWzm

44. new KeyframeEffect(
);
whiteRabbit,
[
{ transform: 'translateY(0%)' },
{ transform: 'translateY(100%)' }
],
{
duration: 3000,
fill: 'forwards'
}
var rabbitDownKeyframes =

45. cdpn.io/eJyWzm

46. Familiar Keyframe timing options
duration = transition/animation-duration
delay = transition/animation-delay
fill = animation-fill-mode
iterations = animation-iteration-count
direction = animation-direction
easing = transition/animation-timing-function;
Defaults to linear.

47. Shiny Keyframe timing options
endDelay Milliseconds to delay aDer the end of an
anima0on.
iterationStart When the itera0on the anima0on should
start.
composite, iteration-composite

48. Animation
Constructor

49. var rabbitDownKeyframes =
new KeyframeEffect(
whiteRabbit,
[
{ transform: 'translateY(0%)' },
{ transform: 'translateY(100%)' }
],
{
duration: 3000,
fill: 'forwards'
}
);

50. KeyframeEffect
Anima-on

51. new Animation(rabbitDownKeyframes,
document.timeline);
var rabbitDownAnimation =
new Animation(rabbitDownKeyframes,
document.timeline);
new Animation(rabbitDownKeyframes,
document.timeline);

52. Animation Methods
Animation.pause()
Animation.play()
Animation.reverse()
Animation.finish()
Animation.cancel()

53. whiteRabbit.removeEventListener(
"click", downHeGoes);
function downHeGoes() {
}
whiteRabbit.addEventListener("click",
downHeGoes);
rabbitDownAnimation.play();

54. cdpn.io/eJyWzm

55. Fortunately,
we have a shortcut.

56. animate( )
Method

57. #rabbit {
transition: transform 3s;
}
#rabbit.interacted {
transform: translateY(100%);
}

58. #rabbit.interacted {
animation: downHeGoes 3s forwards;
}
@keyframes downHeGoes {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}

59. cdpn.io/QyOqqW

60. #alice {
animation: aliceTumbling infinite 3s linear;
}
@keyframes aliceTumbling {
0% {
color: #000;
transform: rotate(0) …;
}
30% {
color: #431236;
}
100% {
color: #000;
transform: rotate(360deg) …;
}
}

61. element.animate(
keyframes,
timingOptions
);

62. var aliceKeyframes = [
{
transform: 'rotate(0) …',
color: '#000'
},
{
color: '#431236',
},
{
transform: 'rotate(360deg) …',
color: '#000'
}
];
offset: 0.3

63. var aliceTiming = {
duration: 3000,
iterations: Infinity
}

64. Let’s put these together!

65. element.animate(
keyframes,
timingOptions
);

66. document.getElementById("alice").animate(
aliceTumbling,
aliceTiming
);

67. cdpn.io/rxpmJL

68. Playback
& Callbacks

69. Anima-on

70. Animation Attributes
onfinish promise
oncancel promise
ready promise
playState read-only, use methods
playbackRate more on you later…
effect points to…

71. KeyframeEffect
Anima-on

72. Animation Attributes
currentTime loca0on on 0meline
finished callback

75. goo.gl/Ek7T5h

77. var aliceChange =
document.getElementById('alice')
.animate(
[
{ transform: 'scale(.5) …' },
{ transform: 'scale(2) …' }
], aliceTimingOptions);
aliceChange.pause();

78. goo.gl/Ek7T5h

79. var aliceChange =
document.getElementById('alice')
.animate(
[
{ transform: 'scale(.5) …' },
{ transform: 'scale(2) …' }
], aliceTimingOptions);
aliceChange.pause();
aliceChange.currentTime =
aliceChange.effect.timing.duration / 2;

80. Setting the
Controls

82. var shrinkAlice = function() {
aliceChange.playbackRate = -1;
aliceChange.play();
// bottle’s animation
drinking.play();
}
drinking.addEventListener("mousedown", shrinkAlice);
var shrinkAlice = function() {
aliceChange.playbackRate = -1;
aliceChange.play();
// bottle’s animation
drinking.play();
}
drinking.addEventListener("mousedown", shrinkAlice);
var shrinkAlice = function() {
aliceChange.playbackRate = -1;
aliceChange.play();
// bottle’s animation
drinking.play();
}
drinking.addEventListener("mousedown", shrinkAlice);
var shrinkAlice = function() {
aliceChange.playbackRate = -1;
aliceChange.play();
// bottle’s animation
drinking.play();
}
drinking.addEventListener("mousedown", shrinkAlice);
var shrinkAlice = function() {
aliceChange.playbackRate = -1;
aliceChange.play();
// bottle’s animation
drinking.play();
}
drinking.addEventListener("mousedown", shrinkAlice);
var shrinkAlice = function() {
aliceChange.reverse();
// bottle’s animation
drinking.play();
}
drinking.addEventListener("mousedown", shrinkAlice);

83. goo.gl/Ek7T5h

84. var growAlice = function() {
aliceChange.playbackRate = 1;
aliceChange.play();
// play cake’s animation
nommingCake.play();
}
cake.addEventListener("mousedown", growAlice);

85. var stopPlayingAlice = function() {
aliceChange.pause();
nommingCake.pause();
drinking.pause();
};
bottle.addEventListener("mouseup", stopPlayingAlice);
cake.addEventListener("mouseup", stopPlayingAlice);
var stopPlayingAlice = function() {
aliceChange.pause();
nommingCake.pause();
drinking.pause();
};
bottle.addEventListener("mouseup", stopPlayingAlice);
cake.addEventListener("mouseup", stopPlayingAlice);
var stopPlayingAlice = function() {
aliceChange.pause();
nommingCake.pause();
drinking.pause();
};
bottle.addEventListener("mouseup", stopPlayingAlice);
cake.addEventListener("mouseup", stopPlayingAlice);

86. Game Over:
Two Endings

89. cdpn.io/bEPdQr

90. cdpn.io/EPJdJx

92. cdpn.io/PNYGZQ

93. // When the cake or runs out...
nommingCake.onfinish = endGame;
drinking.onfinish = endGame;
// ...or Alice reaches the end of her
animation
aliceChange.onfinish = endGame;
// When the cake or runs out...
animation.onfinish = endGame;
drinking.onfinish = endGame;
// ...or Alice reaches the end of her
animation
aliceChange.onfinish = endGame;
// When the cake or runs out...
nommingCake.onfinish = endGame;
drinking.onfinish = endGame;
// ...or Alice reaches the end of her
animation
aliceChange.onfinish = endGame;

94. var endGame = function() {
var alicePlayhead =
aliceChange.currentTime;
var aliceTimeline =
aliceChange.effect.activeDuration;
var aliceHeight =
alicePlayhead/aliceTimeline;
}
var endGame = function() {
var alicePlayhead =
aliceChange.currentTime;
var aliceTimeline =
aliceChange.effect.activeDuration;
var aliceHeight =
alicePlayhead/aliceTimeline;
}
var endGame = function() {
var alicePlayhead =
aliceChange.currentTime;
var aliceTimeline =
aliceChange.effect.activeDuration;
var aliceHeight =
alicePlayhead/aliceTimeline;
}
var endGame = function() {
var alicePlayhead =
aliceChange.currentTime;
var aliceTimeline =
aliceChange.effect.activeDuration;
var aliceHeight =
alicePlayhead/aliceTimeline;
}

95. var aliceHeight =
alicePlayhead/aliceTimeline;
if (aliceHeight <= .333){
// Alice got smaller!
…
} else if (aliceHeight >= .666) {
// Alice got bigger!
…
} else {
// Alice didn't change significantly
…
}
var aliceHeight =
alicePlayhead/aliceTimeline;
if (aliceHeight <= .333){
// Alice got smaller!
…
} else if (aliceHeight >= .666) {
// Alice got bigger!
…
} else {
// Alice didn't change significantly
…
}

96. var endGame = function() {
stopPlayingAlice();
var alicePlayhead = aliceChange.currentTime;
var aliceTimeline = aliceChange.effect.activeDuration;
var aliceHeight = alicePlayhead/aliceTimeline;
if (aliceHeight <= .333){
// Alice got smaller!
…
} else if (aliceHeight >= .666) {
// Alice got bigger!
…
} else {
// Alice didn't change significantly
…
}
}
var endGame = function() {
stopPlayingAlice();
var alicePlayhead = aliceChange.currentTime;
var aliceTimeline = aliceChange.effect.activeDuration;
var aliceHeight = alicePlayhead/aliceTimeline;
if (aliceHeight <= .333){
// Alice got smaller!
…
} else if (aliceHeight >= .666) {
// Alice got bigger!
…
} else {
// Alice didn't change significantly
…
}
}

97. Bonus:
Randomizing
Animation

98. cdpn.io/EPJdJx

99. var getRandomMsRange = function(min, max) {
return Math.random() * (max - min) + min;
}
tears.forEach(function(tear) {
tear.animate(
tearsFalling,
{
delay: getRandomMsRange(-1000, 1000),
duration: getRandomMsRange(2000, 6000),
iterations: Infinity,
easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
});
});
var getRandomMsRange = function(min, max) {
return Math.random() * (max - min) + min;
}
tears.forEach(function(tear) {
tear.animate(
tearsFalling,
{
delay: getRandomMsRange(-1000, 1000),
duration: getRandomMsRange(2000, 6000),
iterations: Infinity,
easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
});
});
var getRandomMsRange = function(min, max) {
return Math.random() * (max - min) + min;
}
tears.forEach(function(tear) {
tear.animate(
tearsFalling,
{
delay: getRandomMsRange(-1000, 1000),
duration: getRandomMsRange(2000, 6000),
iterations: Infinity,
easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
});
});
var getRandomMsRange = function(min, max) {
return Math.random() * (max - min) + min;
}
tears.forEach(function(tear) {
tear.animate(
tearsFalling,
{
delay: getRandomMsRange(-1000, 1000),
duration: getRandomMsRange(2000, 6000),
iterations: Infinity,
easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
});
});
var getRandomMsRange = function(min, max) {
return Math.random() * (max - min) + min;
}
tears.forEach(function(tear) {
tear.animate(
tearsFalling,
{
delay: getRandomMsRange(-1000, 1000),
duration: getRandomMsRange(2000, 6000),
iterations: Infinity,
easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
});
});

100. Playback
Rate

101. The Red Queen’s Race

102. cdpn.io/GZpREz

103. var redQueen_alice =
redQueen_alice_sprite.animate(
spriteFrames,
{
easing: 'steps(6, end)',
direction: "reverse",
duration: 600,
iterations: Infinity,
playbackRate: 1
});
var redQueen_alice =
redQueen_alice_sprite.animate(
spriteFrames,
{
easing: 'steps(6, end)',
direction: "reverse",
duration: 600,
iterations: Infinity,
playbackRate: 1
});

104. setInterval( function() {
if (redQueen_alice.playbackRate > .4) {
redQueen_alice.playbackRate *= .9;
}
}, 3000);
setInterval( function() {
if (redQueen_alice.playbackRate > .4) {
redQueen_alice.playbackRate *= .9;
}
}, 3000);
setInterval( function() {
if (redQueen_alice.playbackRate > .4) {
redQueen_alice.playbackRate *= .9;
}
}, 3000);

105. var goFaster = function() {
redQueen_alice.playbackRate *= 1.1;
}
document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);

106. Running to
Stay in Place

107. cdpn.io/PNGGaV

108. What’s
Next

109. github.com/web-animations/web-
animations-js

110. Support for the Web Anima5ons API
Let’s do this.
Totes.

111. status.microsoftedge.com

112. uservoice.microso2edge.com

114. Spirit.js

115. ChromeCanary

116. GroupingandSequencing
goo.gl/1zH64t

117. Timing Anima-on

118. Web
Anima-ons
API
CSS
Transi-ons
CSS
Anima-ons
Web Anima5ons API
opens the door to future anima5on specs
?

119. Ace Folks
Alex Miller
Opal Essence
Chris Mills
Brian Birtles

120. @RachNabo
RachelNabors.com/waapi
WebAnimaConWeekly.com
slack.AnimaConAtWork.com
Here for all your animaCon needs.