CSS3 Transforms Transitions and Animations
5 likes2,368 views
This document discusses CSS3 transforms, transitions, and animations. It covers 2D and 3D transforms including translate, scale, rotate, and skew. It also discusses transitions including properties, duration, delay and timing functions. The document explains CSS animations using keyframes and properties like animation name, duration, and iteration count. It provides examples of transforms, transitions and animations. Finally, it discusses vendor prefixes, dynamic CSS with LESS/Sass, considerations for browser support, and resources for further reading.
CSS3 Transforms Transitions and Animations
- 1. CSS3 Transforms, Transitions & Animations @yaili
- 3. “CSS 2D Transforms allows elements rendered by CSS to be transformed in two-dimensional space.” —W3C, http://www.w3.org/TR/css3-2d-transforms/
- 4. #flower { background: url(flower-‐1.png); width: 300px; height: 300px; } #flower:hover { transform: translateX(600px); }
- 6. translate, translateX, translateY scale, scaleX, scaleY rotate skew, skewX, skewY matrix
- 7. #flower:hover { transform: translate(600px, -‐50px) scale(1.5) ➥ rotate(15deg) skew(15deg); }
- 9. #flower:hover { transform: translate(600px, -‐50px) scale(1.5) ➥ rotate(15deg) skew(15deg); transform-‐origin: 0 0; }
- 11. 3D Transforms
- 13. translate → translate3d rotate → rotate3d matrix → matrix3d
- 16. body { perspective: 1000; perspective-‐origin: 50% 100%; } #kitten { margin: auto; display: block; } #kitten:hover { transform: rotateY(-‐25deg); }
- 18. #level1 { background: url(kitten.jpg) no-‐repeat; width: 500px; height: 333px; transform: rotateY(-‐25deg); transform-‐style: preserve-‐3d; }
- 19. #level2 { border: 5px solid red; width: 200px; height: 200px; transform: translateZ(50px); } #level3 { background: pink; width: 150px; height: 150px; top: -‐20px; position: relative; transform: translateZ(40px); }
- 21. Transitions
- 22. #flower { background: url(flower-‐1.png); width: 300px; height: 300px; } #flower:hover { transform: translateX(600px); }
- 23. #flower { background: url(flower-‐1.png); width: 300px; height: 300px; transition-‐property: transform; transition-‐duration: 1.5s; transition-‐delay: .1s; transition-‐timing-‐function: ease-‐in; } #flower:hover { transform: translateX(600px); }
- 24. #flower { background: url(flower-‐1.png); width: 300px; height: 300px; transition: all 1.5s ease-‐in .1s; }
- 25. Animations
- 26. “CSS Animations allow an author to modify CSS property values over time.” —W3C, http://www.w3.org/TR/css3-animations/
- 27. @keyframes sky { 0% { background-‐color: #daf2f4; } 50% { background-‐color: #f7d518; } 100% { background-‐color: #f5700d; } }
- 28. #box { animation-‐name: sky; animation-‐duration: 5s; animation-‐timing-‐function: linear; animation-‐iteration-‐count: infinite; animation-‐direction: alternate; }
- 29. #box { animation: sky 10s linear infinite alternate; }
- 31. @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
- 32. #flower-‐1, #flower-‐2, #flower-‐3 { animation: spin .7s linear infinite; }
- 34. Vendor Prefixes
- 35. #flower:hover { transform: translateX(600px); }
- 36. #flower:hover { -‐moz-‐transform: translateX(600px); -‐ms-‐transform: translateX(600px); -‐o-‐transform: translateX(600px); -‐webkit-‐transform: translateX(600px); transform: translateX(600px); }
- 37. “Comparison of layout engines” http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
- 38. “When can I use…” http://caniuse.com/
- 39. Dynamic CSS
- 40. LESS & Sass
- 41. .borders { border: 1px solid black; border-‐radius: 4px; } .box { = background: red; border: 1px solid black; .box { border-‐radius: 4px; } background: red; .borders; }
- 42. .translateX (@valueX:"") { -‐moz-‐transform: translateX(@valueX); -‐ms-‐transform: translateX(@valueX); -‐o-‐transform: translateX(@valueX); -‐webkit-‐transform: translateX(@valueX); transform: translateX(@valueX); } #flower:hover { .translateX(600px); }
- 43. .transition (@property:"", @duration:"", @delay:"", @timing:"") { -‐moz-‐transition-‐property: @property; -‐o-‐transition-‐property: @property; -‐webkit-‐transition-‐property: @property; transition-‐property: @property; -‐moz-‐transition-‐duration: @duration; -‐o-‐transition-‐duration: @duration; -‐webkit-‐transition-‐duration: @duration; transition-‐duration: @duration; -‐moz-‐transition-‐delay: @delay; -‐o-‐transition-‐delay: @delay; -‐webkit-‐transition-‐delay: @delay; transition-‐delay: @delay; -‐moz-‐transition-‐timing-‐function: @timing; -‐o-‐transition-‐timing-‐function: @timing; -‐webkit-‐transition-‐timing-‐function: @timing; transition-‐timing-‐function: @timing; }
- 44. #flower { .transition(transform, 1.5s, .1s, ease-‐in); }
- 45. “Pro CSS for High Traffic Websites” by Antony Kennedy & Inayaili de León procssforhightrafficwebsites.com
- 46. Resources
- 47. “CSS3 for Web Designers”, by Dan Cederholm http://www.abookapart.com/products/css3-for-web-designers
- 48. “Hardboiled Web Design”, by Andy Clarke http://fivesimplesteps.com/books/hardboiled-web-design
- 50. Mozilla Developer Network https://developer.mozilla.org/en-US/
- 52. Considerations
- 53. IE F IREFOX W EB K IT O PERA 2D Transforms IE 9 Firefox 3.5 Opera 10.5 3D Transforms IE 10 Transitions IE 10 Firefox 4 Opera 10.5 Animations Firefox 5
- 56. Final thoughts
- 60. Just because you can, doesn’t mean you should.
- 62. “The Illusion of Life: Disney Animation” by Ollie Johnston & Frank Thomas
- 63. “Anything composed of living flesh, no matter how bony, will show considerable movement within its shape in progressing through action.” —Ollie Johnston & Frank Thomas, “The Illusion of Life: Disney Animation”
- 64. “If the character has any appendages, such as long ears or a tail or a big coat, these parts continue to move a er the rest of the figure has stopped.” —Ollie Johnston & Frank Thomas, “The Illusion of Life: Disney Animation”
- 66. Thank You! @yaili