Motion Design with CSS!
Val Head • @vlh #openvisconf
#openvisconf @vlh
Low barrier to entry
Reuseableness
Performance*
Advantages of CSS
#openvisconf @vlh
Predetermined motion
Animating between two states
Reusable motion
Animations CSS is good at
#openvisconf @vlh
Dynamic motion
Multi-state animation
Physics
CSS is less good at…
#openvisconf @vlh
CSS has friends! Like JavaScript. They’re pals.
#openvisconf @vlh
Great UI animation has purpose and style.
#openvisconf @vlh
#openvisconf @vlh
Animation principles
#openvisconf @vlh
1: Timing !
#openvisconf @vlh
Timing: appearing to obey the laws of “physics”
#openvisconf @vlh
Timing: establishes mood, emotion, and reaction
#openvisconf @vlh
ease
linear
ease-in
ease-out
ease-in-out
Timing function keywords
cubic-bezier(0.42, 0, 0.58, 1);
#openvisconf @vlh
TIME
PROGRE
SSION
#openvisconf @vlh
Everything is better with cubic beziers!
#openvisconf @vlh
#openvisconf @vlh
#openvisconf @vlh
2: Follow Through
#openvisconf @vlh
#openvisconf @vlh
#openvisconf @vlh
#openvisconf @vlh
3: Secondary action
#openvisconf @vlh
Secondary action: supplemental action that reinforces and adds dimension
#openvisconf @vlh
#openvisconf @vlh
#openvisconf @vlh
#openvisconf @vlh
Even Better browser tools for CSS animation
valhead.com/ui-animation
alltherightmoves.valhead.com
fivesimplesteps.com/products/css-animations
#openvisconf @vlh
Thanks Openvis! !
@vlh valhead.com alltherightmoves.valhead.com