Animation Essentials-CSS Animations and Transitions
Animation Essentials-CSS Animations and Transitions
Animation Essentials-CSS Animations and Transitions
be th e de la y
redund
ant, ble
h
transition:
color 2s,
f v a l ues
te s ets o
sepa ra
c o m m a s
with
exercise
Rolling a Ball
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
$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.
$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
Consult caniuse.com/#feat=css-‐anima+on
CSS Anima=ons
• Looping Can loop infinitely
cdpn.io/zHeir
Title Text
exercise
Sitting Tuna Down
• animationend
• animationiteration
• transitionend
They will fire for
every animation/
transition on the
element.
Browser prefixes requires (of course)
• webkitAnimationIteration for Webkit
.resource-sink {
transform: translateZ(0);
.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
4. Do stuff.
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