css3 transforms transitions and animations
DESCRIPTION
How, why and when should we use CSS3's fantastic new tools?TRANSCRIPT
![Page 1: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/1.jpg)
CSS3 Transforms,Transitions & Animations
@yaili
![Page 2: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/2.jpg)
2D Transforms
![Page 3: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/3.jpg)
“CSS 2D Transforms allows elements rendered by CSS to be transformed in two-dimensional space.”
—W3C, http://www.w3.org/TR/css3-2d-transforms/
![Page 4: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/4.jpg)
#flower { background: url(flower-‐1.png); width: 300px; height: 300px; }
#flower:hover { transform: translateX(600px); }
![Page 5: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/5.jpg)
![Page 6: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/6.jpg)
translate, translateX, translateY
scale, scaleX, scaleY
rotate
skew, skewX, skewY
matrix
![Page 7: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/7.jpg)
#flower:hover { transform: translate(600px, -‐50px) scale(1.5) ➥rotate(15deg) skew(15deg); }
![Page 8: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/8.jpg)
![Page 9: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/9.jpg)
#flower:hover { transform: translate(600px, -‐50px) scale(1.5) ➥ rotate(15deg) skew(15deg); transform-‐origin: 0 0; }
![Page 10: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/10.jpg)
![Page 11: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/11.jpg)
3D Transforms
![Page 12: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/12.jpg)
scale → scale3d
scaleX
scaleY
scaleZ
![Page 13: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/13.jpg)
translate → translate3d
rotate → rotate3d
matrix → matrix3d
![Page 14: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/14.jpg)
perspective-‐origin
![Page 15: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/15.jpg)
backface-‐visibility
![Page 16: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/16.jpg)
body { perspective: 1000; perspective-‐origin: 50% 100%; }
#kitten { margin: auto; display: block; }
#kitten:hover { transform: rotateY(-‐25deg); }
![Page 17: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/17.jpg)
![Page 18: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/18.jpg)
#level1 { background: url(kitten.jpg) no-‐repeat; width: 500px; height: 333px; transform: rotateY(-‐25deg); transform-‐style: preserve-‐3d; }
![Page 19: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/19.jpg)
#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); }
![Page 20: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/20.jpg)
![Page 21: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/21.jpg)
Transitions
![Page 22: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/22.jpg)
#flower { background: url(flower-‐1.png); width: 300px; height: 300px; }
#flower:hover { transform: translateX(600px); }
![Page 23: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/23.jpg)
#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); }
![Page 24: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/24.jpg)
#flower { background: url(flower-‐1.png); width: 300px; height: 300px; transition: all 1.5s ease-‐in .1s; }
![Page 25: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/25.jpg)
Animations
![Page 26: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/26.jpg)
“CSS Animations allow an author to modify CSS property values over time.”
—W3C, http://www.w3.org/TR/css3-animations/
![Page 27: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/27.jpg)
@keyframes sky { 0% { background-‐color: #daf2f4; } 50% { background-‐color: #f7d518; } 100% { background-‐color: #f5700d; }}
![Page 28: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/28.jpg)
#box { animation-‐name: sky; animation-‐duration: 5s; animation-‐timing-‐function: linear; animation-‐iteration-‐count: infinite; animation-‐direction: alternate; }
![Page 29: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/29.jpg)
#box { animation: sky 10s linear infinite alternate; }
![Page 30: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/30.jpg)
![Page 31: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/31.jpg)
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); }}
![Page 32: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/32.jpg)
#flower-‐1,#flower-‐2,#flower-‐3 { animation: spin .7s linear infinite; }
![Page 33: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/33.jpg)
![Page 34: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/34.jpg)
Vendor Prefixes
![Page 35: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/35.jpg)
#flower:hover { transform: translateX(600px); }
![Page 36: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/36.jpg)
#flower:hover { -‐moz-‐transform: translateX(600px); -‐ms-‐transform: translateX(600px); -‐o-‐transform: translateX(600px); -‐webkit-‐transform: translateX(600px); transform: translateX(600px); }
![Page 37: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/37.jpg)
“Comparison of layout engines”http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
![Page 38: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/38.jpg)
“When can I use…”http://caniuse.com/
![Page 39: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/39.jpg)
Dynamic CSS
![Page 40: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/40.jpg)
LESS & Sass
![Page 41: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/41.jpg)
.borders { border: 1px solid black; border-‐radius: 4px; }
.box { background: red; .borders; }
.box { background: red; border: 1px solid black; border-‐radius: 4px; }
=
![Page 42: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/42.jpg)
.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); }
![Page 43: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/43.jpg)
.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; }
![Page 44: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/44.jpg)
#flower { .transition(transform, 1.5s, .1s, ease-‐in); }
![Page 45: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/45.jpg)
“Pro CSS for High Traffic Websites”
by Antony Kennedy & Inayaili de León
procssforhightrafficwebsites.com
![Page 46: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/46.jpg)
Resources
![Page 47: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/47.jpg)
“CSS3 for Web Designers”, by Dan Cederholmhttp://www.abookapart.com/products/css3-for-web-designers
![Page 48: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/48.jpg)
“Hardboiled Web Design”, by Andy Clarkehttp://fivesimplesteps.com/books/hardboiled-web-design
![Page 49: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/49.jpg)
Surfin’ Safarihttp://www.webkit.org/blog/
![Page 50: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/50.jpg)
Mozilla Developer Networkhttps://developer.mozilla.org/en-US/
![Page 51: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/51.jpg)
The Specificationhttp://www.w3.org/
![Page 52: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/52.jpg)
Considerations
![Page 53: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/53.jpg)
FIREFOXIE WEBKIT OPERA
2D Transforms
3D Transforms
Transitions
Animations
IE 9 Firefox 3.5 Opera 10.5
IE 10
IE 10 Firefox 4 Opera 10.5
Firefox 5
![Page 54: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/54.jpg)
![Page 55: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/55.jpg)
![Page 56: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/56.jpg)
Final thoughts
![Page 57: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/57.jpg)
“CSS3 Memory”http://media.miekd.com/css3memory/
![Page 58: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/58.jpg)
“Kaleidoscope”http://www.kaleidoscopeapp.com/
![Page 59: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/59.jpg)
“Reeder”http://reederapp.com/
![Page 60: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/60.jpg)
Just because you can, doesn’t mean you should.
![Page 61: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/61.jpg)
http://www.flickr.com/photos/8790226@N06/3577837508/
![Page 62: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/62.jpg)
“The Illusion of Life: Disney Animation”
by Ollie Johnston & Frank Thomas
![Page 63: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/63.jpg)
“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”
![Page 64: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/64.jpg)
“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”
![Page 65: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/65.jpg)
![Page 66: CSS3 Transforms Transitions and Animations](https://reader033.vdocuments.us/reader033/viewer/2022042713/547cea82b37959822b8b509d/html5/thumbnails/66.jpg)
Thank You!@yaili