CSS animations, Web Animations API, and building interactive experiences

lightningdesignsystem.com/design/motion

rachelnabors.com/alice-in-
videoland/book

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

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

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

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

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

The Timing & Anima5on Models
The When The What

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

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

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

0 seconds 8 seconds4 seconds2 61 3 5 7
there not all
there
the Cheshire Cat’s 5meline
Keyframe Eﬀect

Interac5on Development
Tradi5onal Anima5on
tweenskeyframe keyframe
key keyin-betweens

Do you evenremember me?
KeyframeEﬀect
Anima-on

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

CSS
Animations
& Transitions
WEB
ANIMATIONS API

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

0% 8 seconds4 seconds2 61 3 5 7
there not all
there
Keyframe Eﬀect

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

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

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.

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

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

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

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

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

Fortunately,
we have a shortcut.

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

#rabbit.interacted {
animation: downHeGoes 3s forwards;
}
@keyframes downHeGoes {
0% {
}
100% {
}
}

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

element.animate(
keyframes,
timingOptions
);

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

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

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

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

Animation Attributes
currentTime loca0on on 0meline
finished callback

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

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

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

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

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

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

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

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

stopPlayingAlice();
var alicePlayhead = aliceChange.currentTime;
var aliceTimeline = aliceChange.effect.activeDuration;
var aliceHeight = alicePlayhead/aliceTimeline;
…
…
} else {
…
}
}
stopPlayingAlice();
var alicePlayhead = aliceChange.currentTime;
var aliceTimeline = aliceChange.effect.activeDuration;
var aliceHeight = alicePlayhead/aliceTimeline;
…
…
} else {
…
}
}

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

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

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

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

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

GroupingandSequencing 
goo.gl/1zH64t

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

Ace Folks
Alex Miller
Opal Essence
Chris Mills
Brian Birtles

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

CSS animations, Web Animations API, and building interactive experiences

Recommended

Recommended

More Related Content

Similar to CSS animations, Web Animations API, and building interactive experiences

Similar to CSS animations, Web Animations API, and building interactive experiences (20)

More from Rachel Nabors

More from Rachel Nabors (13)

Recently uploaded

Recently uploaded (20)

CSS animations, Web Animations API, and building interactive experiences