Downloaded 104 times
Uploaded byInayaili León
CSS3 Transforms Transitions and Animations
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
- 2.
- 3. “CSS 2D Transformsallows 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.
- 12.
- 13. translate → translate3d rotate → rotate3d matrix → matrix3d
- 14.
- 15.
- 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.
- 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.
- 26. “CSS Animations allowan 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.
- 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 layoutengines” http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
- 38. “When can Iuse…” http://caniuse.com/
- 39.
- 40.
- 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 forHigh Traffic Websites” by Antony Kennedy & Inayaili de León procssforhightrafficwebsites.com
- 46.
- 47. “CSS3 for WebDesigners”, 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
- 49.
- 50. Mozilla Developer Network https://developer.mozilla.org/en-US/
- 51.
- 52.
- 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.
- 57.
- 58.
- 59.
- 60. Just because youcan, doesn’t mean you should.
- 61.
- 62. “The Illusion ofLife: Disney Animation” by Ollie Johnston & Frank Thomas
- 63. “Anything composed ofliving 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 characterhas 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