This document summarizes CSS transitions and animations. Transitions allow gradual changes between states, like color changes on hover. Animations define multiple keyframes to transition between over time. Both require setting a property, duration and can be controlled with JavaScript events. Transitions are simpler but animations can define complex multi-step changes. For performance, animating with transforms like translate is preferable to top/right/bottom/left since it uses the GPU.

1. CSS Animations &
Transitions
Refresh Hilo 2/10/15

2. What’s going to be covered
● What are Transitions & Animations
● Pros and Cons
● Performance

3. Transitions
div {
color:black;
transition: color 1s linear 500ms;
transition-property: color;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 500ms; }
div:hover {color:red;}

4. Transitions
● Transition property - what will change
● Transition duration - animation time
● Transition timing function - animation speed curve
● Transition delay - time before animation
Must have a property and duration set for transition
animations to work!

5. Transitions
Changes transition property from one state to another.
● Set animation in current state, modify state with pseudo
classes (:hover,:focus) or classes (.active)
● Multiple properties can be animated
● Animation properties can be changed (Javascript &
:pseudo)
● JS listeners on transition end: ‘transitionend’
● Properties List
● Demo

6. Questions?

7. Animations
div { animation: GoAnimate 2s;}
@keyframes GoAnimate {
from { color: black;}
to { color: red;}
}

8. Animations
div {
animation-name: GoAnimate;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 500ms;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
animation-fill-mode: forward;
}
@keyframes GoAnimate {
0% { color: black;}
25% {color:pink;}
50% {color:orange;}
75% {color:blue;}
100% { color: red;}
}

9. Animations
● Animation name - name of defined animation
● Animation duration, timing function, delay same as
transition
● Animation iteration count - how many times it will loop
● Animation direction - direction and alternate cycles
● Animation play state - running or paused (can toggle)
● Animation fill mode - sets end state after animation
Must have a name and duration set for animations to
work!

10. Animations
● Once an animation is applied it can’t be changed, only
paused (animation-play-state) - can be changed with
JS, but resets the animation
● JS listeners on start, iteration, end of animation (not
paused) - event object is useful, ‘elapsedTime’
o ‘animationstart’, ‘animationiteration’, ‘animationend’
● Don’t forget animation-fill-mode
● Properties List
● Demo Swing, Demo Play State

11. Questions?

12. Pros & Cons
Transitions Pros
● Good for :pseudo-classes
(:hover,:active)
● Does not require JS
● Reversible - easy state change
● Easy to use
Transitions Cons
● Simple only
● Browser prefixes (-webkit)
● Sometimes requires JS
assistance - change the height of
something
Animations Pros
● Complex Animations with
multiple keyframes (0%, 1%,
5%)
● JS listeners
● Defined Animations - modular
Animations Cons
● Can’t change without JS - no
easy reverse
● Browser prefixes
● Complex interactions require JS

13. Performance
How do you measure performance?
Chrome dev tools > timeline
Record Animation and review results.
Goal > 30fps - target is around 60fps

14. Performance
CPU vs GPU Animation: Most animation use the CPU,
animations that use transforms (sometimes) use the GPU.
● Use transform:translate() vs TRBL
o TRBL uses whole pixels - requires more paint time
o transform:translate uses subpixels and tweens
animation smoother - no stair stepping
● Low cost animations = position(transform), rotation,
scale, opacity

15. Performance
TRBL transform:translate
Scripting = JS events, functions, etc
Rendering = layout
Painting = pixels on screen
Idle = sipping Mai-Tai’s

16. Questions?
Edward Meehan - Refresh Hilo 2015