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.
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
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
…
}
}