Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Motion Design with CSS

2,066 views

Published on

Published in: Design
  • Login to see the comments

Motion Design with CSS

  1. 1. Motion Design 
 with CSS! Val Head • @vlh #openvisconf
  2. 2. #openvisconf @vlh Lowbarrierto entry Reuseableness Performance* Advantages of CSS
  3. 3. #openvisconf @vlh Predetermined motion Animating between two states Reusable motion Animations CSS is good at
  4. 4. #openvisconf @vlh Dynamic motion Multi-state animation Physics CSS is less good at…
  5. 5. #openvisconf @vlh CSS has friends! Like JavaScript. They’re pals.
  6. 6. #openvisconf @vlh Great UI animation has purpose and style.
  7. 7. #openvisconf @vlh
  8. 8. #openvisconf @vlh
  9. 9. Animation principles
  10. 10. #openvisconf @vlh 1: Timing !
  11. 11. #openvisconf @vlh Timing: appearing to obey the laws of “physics”
  12. 12. #openvisconf @vlh Timing: establishes mood, emotion, and reaction
  13. 13. #openvisconf @vlh ease linear ease-in ease-out ease-in-out Timing function keywords
  14. 14. cubic-bezier(0.42, 0, 0.58, 1);
  15. 15. #openvisconf @vlh TIME PROGRESSION
  16. 16. #openvisconf @vlh Everything is better with cubic beziers!
  17. 17. #openvisconf @vlh
  18. 18. #openvisconf @vlh
  19. 19. ease-in-out
  20. 20. #openvisconf @vlh 2: Follow Through
  21. 21. #openvisconf @vlh
  22. 22. #openvisconf @vlh
  23. 23. #openvisconf @vlh
  24. 24. #openvisconf @vlh 3: Secondary action
  25. 25. #openvisconf @vlh Secondary action: 
 supplemental action that reinforces and adds dimension
  26. 26. #openvisconf @vlh
  27. 27. #openvisconf @vlh
  28. 28. #openvisconf @vlh
  29. 29. #openvisconf @vlh
  30. 30. Even Betterbrowser tools forCSS animation
  31. 31. valhead.com/ui-animation
  32. 32. alltherightmoves.valhead.com
  33. 33. fivesimplesteps.com/products/css-animations
  34. 34. #openvisconf @vlh Thanks Openvis! ! @vlh valhead.com alltherightmoves.valhead.com

×