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

ease-in-out

#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