Download as PDF, PPTX
Uploaded byVal Head
Motion Design with CSS
This document discusses using CSS for motion design and animation. It notes some advantages of CSS like low barrier to entry and reusability. It explains that CSS is good for predetermined and two-state animations but less good for dynamic multi-state animations. JavaScript can be used to enhance CSS animations. The document also covers animation principles like timing using keywords and cubic beziers to establish mood, and secondary actions to add dimension. It promotes additional resources for learning CSS animation.
![[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...](https://cdn.slidesharecdn.com/ss_thumbnails/binhphanreactjs-170420085708-thumbnail.jpg?width=640&height=640&fit=bounds)
Motion Design with CSS
- 1. Motion Design withCSS! Val Head • @vlh #openvisconf
- 2.
- 3. #openvisconf @vlh Predetermined motion Animatingbetween two states Reusable motion Animations CSS is good at
- 4. #openvisconf @vlh Dynamic motion Multi-stateanimation Physics CSS is less good at…
- 5. #openvisconf @vlh CSS hasfriends! Like JavaScript. They’re pals.
- 9. #openvisconf @vlh Great UIanimation has purpose and style.
- 11.
- 12.
- 13.
- 15.
- 16. #openvisconf @vlh Timing: appearing toobey the laws of “physics”
- 17.
- 18.
- 19.
- 20.
- 23. #openvisconf @vlh Everything isbetter with cubic beziers!
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. #openvisconf @vlh Secondary action: supplemental action that reinforces and adds dimension
- 33.
- 34.
- 35.
- 36.
- 37. Even Betterbrowser tools forCSSanimation
- 42.
- 43.
- 44.
- 45.