Animation Essentials
CSS Animations and Transitions
with @RachelNabors & Tuna P. Katz
Get started with “SMASHINGROCKS” at goo.gl/ZL0SVd
@RachelNabors RachelNabors.com
It’s true. RacheltheGreat.com
rachelnabors.com/archive
WebAnimationWeekly.com
(It’s the best.)
You will learn…
• CSS Transi+ons
• CSS Anima+ons
• Sequencing Anima+ons
• How to Design Performant Anima+ons
• And some handy browser tools for working with anima+ons
For your convenience…
All of the exercises use:
• jQuery
• and -‐prefix-‐free
Our Teacher’s Assistant Today
CSS Transitions
A transition describes
how a property should
display change when
given a different value.
transition: color 2s;
transition-property: color;
transition-duration: 2s;
Anatomy of a transition
• transition-property the property you want to transi+on.
(Only some proper4es are transi4onable, see goo.gl/Ttk1S2)
• transition-duration in seconds or milliseconds: 4s or
4000ms
• transition-timing-function “cushioning” for the
transi+on, op=onal: defaults to ease
• transition-delay the number of milli/seconds to delay
the transi+on before firing it, op=onal
so th is m u st
be th e de la y
transition: color 2s 100ms;
duratio
n always
comes
first
Transitioning Multiple
Properties
transition-property: all;
transition-property: color, transform;
transition-duration: 2s, 300ms;
transition-delay: 0, 1s;
redund
ant, ble
h
transition:
color 2s,
transform 300ms 1s;
f v a l ues
te s ets o
sepa ra
c o m m a s
with
exercise
Rolling a Ball
Start coding! cdpn.io/fGFDj
Try transi=oning its color, too.
Keep up at:
Want to share? Save & tweet codepen link to @rachelnabors
Duration
Three =meframes for user aKen=on
100 ms, instantaneous
1 second, still connected
Three =meframes for user aKen=on
100 ms
1 second
10 seconds, disconnected
rachelnabors.com
“However long your pre-production
animation, halve its duration…
then halve it again.”
–Studio anima6on rule of thumb
rachelnabors.com
250~300 ms:
sweet spot for
many animations
faster != better
rachelnabors.com
You can slow down
transitions with
Dev Tools to get a
good look at ‘em.
Timing Functions
Easing
Easing, also known as “cushioning” in
studio anima+on, describes an
anima+on’s rate of change over +me.
Timing Func=on Values
• linear
• ease-‐in
• ease-‐out
• ease-‐in-‐out
• steps (more on this later)
Replace “ease”
with “slow” to better
remember the different
timing effects.
What you
really want:
cubic-bezier
Make your own at cubic-‐bezier.com
or edit with the Chrome/Firefox
Dev Tools!
croptheblock.com
easings.net
exercise
Applying Physics to the Ball
Start coding! cdpn.io/LVEdXg
Experiment with different easing and dura=ons to find the combina=on that feels “right” to you.
Keep up at:
Want to share? Save & tweet codepen link to @rachelnabors
Browser Support for CSS Transi=ons
Any thing but IE 9 and lower & Opera Mini
caniuse.com/#feat=css-‐transi+ons
CSS Transi=ons rock because…
• Single fire If you only want something to happen once.
• Granularity If you would only animate one or two proper+es
in a given state
Questions?
CSS Animations
.animated-thing {
animation: black-to-white 1s linear 1;
}
num
@keyframes black-to-white { tim ber o
es t f
o ru
0% { background: #000; } n
100% { background: #fff; }
}
.animated-thing {
animation:
$name
$duration
$timing-function (optional)
$animation-delay (optional)
$iteration-count;
}
Long form animation proper=es
• animation-name: The name of the keyframe block you
want to use.
• animation-duration: How long the anima+ons takes to
go from 0% to 100%
• animation-timing-function: Like transition-
timing-function
• animation-delay: The number of seconds to delay the
anima+on instead of playing right away
• animation-iteration-count: The number of +mes you
want to go from 0% to 100%; use infinite to never stop.
Defaults to 1.
.animated-thing {
animation:
$name
$duration
$direction
$fill-mode
$play-state;
}
Long form advanced animation proper=es
• animation-direction: defaults to normal but can be set
to alternate, reverse, alternate-reverse
• animation-fill-mode: Defaults to backwards, rever+ng
to pre-‐anima+on. Can be set to forwards, assuming the end
result of the anima+on, or both (a freakish combina+on?).
• animation-play-state: defaults to running but can be
set to paused.
exercise
Wag the Cat
Start coding! cdpn.io/AfDBF
Play with Tuna’s tail! Change the default advanced CSS anima=on proper=es.
Keep up at:
Want to share? Save & tweet codepen link to @rachelnabors
The @keyframes block
@keyframes black-to-white {
0% {
background: #000;
color: #fff;
}
100% {
background: #fff;
color: #000;
}
}
@keyframes black-to-white {
from {
background: #000;
color: #fff;
}
to {
background: #fff;
color: #000;
}
}
@keyframes black-to-red {
0% { color: #000; }
50% { color: red; }
100% { color: #000; }
}
@keyframes black-to-red {
0%, 100% { color: #000; }
50% { color: red; }
}
@keyframes black-to-red {
0%, 100% {
animation-timing-function:
linear;
}
50% { color: red; }
}
.animated-thing {
animation:
black-to-white 1s linear 1,
black-to-red 2s ease-out infinite 2s;
}
Sprite animation
with CSS
used with the permission of Steven E. Gordon
Meet steps()
• steps(x) is a +ming func+on…
• …splits a block of keyframes into x equal steps, then hops
between them.
• The documenta+on by Tab Atkins
• How it works, plus gotchas: cdpn.io/zeFqy
exercise
Making a Walk-Cycle
Start coding! cdpn.io/cdqga
The sprite: stash.rachelnabors.com/anima=on-‐workshop/sprite_catwalk.png
Keep up at:
Want to share? Save & tweet codepen link to @rachelnabors
cssanima6on.rocks/twi>er-‐fave
Not available on IE 9 and lower & Opera Mini.
Browser Support for CSS Anima=ons
Chrome, Safari and Android all require -webkit- at this +me.
Consult caniuse.com/#feat=css-‐anima+on
CSS Anima=ons
• Looping Can loop infinitely
• Self star=ng Doesn’t require trigger like transition
• Repea=ng You can set how many +me it repeats
• Alterna=ng Can alternate between the end state and start
state
• Grouping Each anima+on can change a number of proper+es
Questions?
Sequencing
.sequenced-thing {
animation:
sequence1 1s 2,
sequence2 3s 2s 1 forwards;
}
nd t i m e
th e 2 la y
nt = de
su rem e
m ea
cdpn.io/zHeir
Title Text
exercise
Sitting Tuna Down
Start coding! cdpn.io/Djcya
Using animation-delay, start a si]ng anima=on a^er the walking anima=on.
Keep up at:
Want to share? Save & tweet codepen link to @rachelnabors
But stacking
isn’t the only
way, nor the
most reliable.
CSS animations
and transitions run
on the system’s
clock.
We’re gonna
need a more
robust technique.
Chaining Animations
with Event Listeners
Four must-‐have JavaScript event listeners
• animationstart
• animationend
• animationiteration
• transitionend
They will fire for
every animation/
transition on the
element.
Browser prefixes requires (of course)
• webkitAnimationIteration for Webkit
• MSAnimationIteration for IE 10
• Everyone else is animationiteration
exercise
Sitting Tuna Down with event listeners
Start coding! cdpn.io/pIiqj
Using animationend, add the .sit class a^er Tuna’s done walking
Keep up at:
Want to share? Save & tweet codepen link to @rachelnabors
Questions?
Performance
csstriggers.com
The two CSS
properties that
don’t don’t trigger
layout or repaints:
opacity
transform
Handy alterna=ves
• transform: scale() instead of width or height
• transform: translate() instead of position
• opacity instead of z-index or visibility: hidden
exercise
Walk the cat… again!
Start coding! cdpn.io/QbwXry
Find a way to walk the cat without using expensive background posi=oning.
Keep up at:
Want to share? Save & tweet codepen link to @rachelnabors
will-change
Hardware accelera=on
AKA “kicking it to the GPU”:
.resource-sink {
transform: translateZ(0);
Please don’t do this.
Hacks are not
future-
friendly.
.in-view .animated-thing {
will-change: transform;
}
.in-view .animated-thing:hover {
transform: translateY(5%);
}
Don’t slap
will-change
on everything.
When we
will-change
everything, we
optimize nothing.
Browser Support for CSS Transi=ons
caniuse.com/#feat=will-‐change
Chrome Dev Tools
Chrome’s FPS Meter
1.Open your Developer Tools.
2.Press the Escape Key to bring up a console window.
3.Choose the Rendering tab.
4.Check the Show FPS meter op+on.
Paint Rectangles
To enable Chrome's paint rectangles:
1. Open your Developer Tools.
2. Press the Escape Key to bring up a console window.
3. Choose the Rendering tab.
4. Check show paint rectangles under Rendering
The Timeline Tool
To use Chrome’s +meline tool:
1. Open your Developer Tools.
2. Go to the Timeline tab.
3. Press the “record circle.”
4. Do stuff.
5. Press the “record circle” again to stop.
6. Inspect!
Best perf tip ever:
Don’t animate it if
it isn’t visible.
Questions?
the end
Let’s be animation friends!
@RachelNabors & RachelNabors.com WebAnimationWeekly.com
