Motion Design with CSS!
Val Head • @vlh #openvisconf
#openvisconf @vlh
Predetermined motion
Animating between two states
Reusable motion
Animations CSS is good at
#openvisconf @vlh
CSS has friends! Like JavaScript. They’re pals.
#openvisconf @vlh
Great UI animation has purpose and style.
#openvisconf @vlh
Timing: appearing to obey the laws of “physics”
#openvisconf @vlh
Timing: establishes mood, emotion, and reaction
cubic-bezier(0.42, 0, 0.58, 1);
#openvisconf @vlh
Everything is better with cubic beziers!
#openvisconf @vlh
Secondary action: supplemental action that reinforces and adds dimension
Even Better browser tools for CSS animation
alltherightmoves.valhead.com
fivesimplesteps.com/products/css-animations
#openvisconf @vlh
Thanks Openvis! !
@vlh valhead.com alltherightmoves.valhead.com