1. Motion Design
with CSS!
Val Head • @vlh
#openvisconf

2. #openvisconf @vlh
Lowbarrierto entry
Reuseableness
Performance*
Advantages of CSS

3. #openvisconf @vlh
Predetermined motion
Animating between two states
Reusable motion
Animations CSS is good at

4. #openvisconf @vlh
Dynamic motion
Multi-state animation
Physics
CSS is less good at…

5. #openvisconf @vlh
CSS has friends!
Like JavaScript.
They’re pals.

9. #openvisconf @vlh
Great UI animation
has purpose and style.

11. #openvisconf @vlh

12. #openvisconf @vlh

13. Animation principles

15. #openvisconf @vlh
1: Timing
!

16. #openvisconf @vlh
Timing:
appearing to obey the
laws of “physics”

17. #openvisconf @vlh
Timing:
establishes mood,
emotion, and reaction

18. #openvisconf @vlh
ease
linear
ease-in
ease-out
ease-in-out
Timing function keywords

19. cubic-bezier(0.42, 0, 0.58, 1);

20. #openvisconf @vlh
TIME
PROGRESSION

23. #openvisconf @vlh
Everything is better
with cubic beziers!

24. #openvisconf @vlh

25. #openvisconf @vlh

26. ease-in-out

27. #openvisconf @vlh
2: Follow
Through

28. #openvisconf @vlh

29. #openvisconf @vlh

30. #openvisconf @vlh

31. #openvisconf @vlh
3: Secondary
action

32. #openvisconf @vlh
Secondary action:
supplemental action that
reinforces and adds
dimension

33. #openvisconf @vlh

34. #openvisconf @vlh

35. #openvisconf @vlh

36. #openvisconf @vlh

37. Even Betterbrowser
tools forCSS animation

42. valhead.com/ui-animation

43. alltherightmoves.valhead.com

44. fivesimplesteps.com/products/css-animations

45. #openvisconf @vlh
Thanks Openvis!
!
@vlh
valhead.com
alltherightmoves.valhead.com