A presentation at standards>next in in London, UK by Inayaili León
CSS3 Transforms, Transitions & Animations @yaili
2D Transforms
“CSS 2D Transforms allows elements rendered by CSS to be transformed in two-dimensional space.” —W3C, http://www.w3.org/TR/css3-2d-transforms/
#flower({ ( background : ( url(flower41.png) ; ( width : ( 300px ; ( height : ( 300px ; ( } #flower:hover({ ( transform : * translateX(600px) ; (}
translate,(translateX,(translateY scale,(scaleX,(scaleY rotate skew,(skewX,(skewY matrix
#flower:hover({ ( transform : ( translate(600px,(450px)(scale(1.5)( ➥ rotate(15deg)(skew(15deg) ;(}
#flower:hover({ ( ( transform : ( translate(600px,(450px)(scale(1.5)( ➥ ( rotate(15deg)(skew(15deg) ; ( transform5origin : * 0*0 ; ( }
3D Transforms
scale(→(scale3d scaleX scaleY scaleZ
translate(→(translate3d rotate(→(rotate3d matrix(→(matrix3d
perspective4origin
backface4visibility
body({ ( perspective : ( 1000 ; ( perspective4origin : ( 50%(100% ;(} #kitten({ ( margin : ( auto ; ( display : ( block ;(} #kitten:hover({ ( ( transform : * rotateY(525deg) ; (}
#level1({ ( background : ( url(kitten.jpg)(no4repeat ; ( width : ( 500px ; ( height : ( 333px ; ( transform : ( rotateY(425deg) ; ( ( transform5style : * preserve53d ; (}
#level2({ ( border : ( 5px(solid(red ; ( width : ( 200px ; ( height : ( 200px ; ( transform : * translateZ(50px) ; (} #level3({ ( background : ( pink ; ( width : ( 150px ; ( height : ( 150px ; ( top : ( 420px ; ( position :( relative ; ( transform : * translateZ(40px) ; (}
Transitions
#flower({ ( background : ( url(flower41.png) ; ( width : ( 300px ; ( height : ( 300px ;(} #flower:hover({ ( transform : ( translateX(600px) ;(}
#flower({ ( background : ( url(flower41.png) ; ( width : ( 300px ; ( height : ( 300px ; ( transition5property : * transform ; * * transition5duration : * 1.5s ; * transition5delay : * .1s ; * * transition5timing5function : * ease5in ; (} #flower:hover({ ( ( transform : ( translateX(600px) ;(}
#flower({ ( background : ( url(flower41.png) ; ( width : ( 300px ; ( height : ( 300px ; ( ( transition : ( all1.5sease5in*.1s ;(}
Animations
“CSS Animations allow an author to modify CSS property values over time.” —W3C, http://www.w3.org/TR/css3-animations/
@keyframes(sky({ ( 0%({ ( background4color : ( #daf2f4 ;(} ( 50%({ ( background4color : ( #f7d518 ;(} ( 100%({ ( background4color : ( #f5700d ;(} }
#box({ ( animation4name : ( sky ; ( animation4duration : ( 5s ; ( animation4timing4function : ( linear ; ( animation4iteration4count : ( infinite ; ( animation4direction : ( alternate ;(}
#box({ ( animation : ( sky10slinearinfinitealternate ;(}
@keyframes(spin({ (0%({ (( transform : ( rotate(0deg) ;(} ( 100%({ (( transform : ( rotate(180deg) ;(} }
#flower41, #flower42, #flower43({ ( animation : ( spin(.7s(linear(infinite ;(}
Vendor Prefixes
#flower:hover({ ( ( transform : ( translateX(600px) ;(}
#flower:hover({ ( 5moz5transform : * translateX(600px) ; * 5ms5transform : * translateX(600px) ; * 5o5transform : * translateX(600px) ; * 5webkit5transform : * translateX(600px) ; ( transform : ( translateX(600px) ;(}
“Comparison of layout engines” http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
“When can I use…” http://caniuse.com/
Dynamic CSS
LESS & Sass
.translateX*(@valueX:"") ({ ( 4moz4transform : ( translateX( @valueX ) ; ( 4ms4transform : ( translateX( @valueX ) ; ( 4o4transform : ( translateX( @valueX ) ; ( 4webkit4transform : ( translateX( @valueX ) ; ( transform : ( translateX( @valueX ) ;(} #flower:hover({ ( ( .translateX( 600px ) ;(}
.transition*(@property:"",@duration:"",@delay:"",*@timing:"") ({ ( 4moz4transition4property : ( @property ; ( 4o4transition4property : ( @property ; ( 4webkit4transition4property : ( @property ; ( transition4property : ( @property ; ( ( 4moz4transition4duration : ( @duration ; ( 4o4transition4duration : ( @duration ; ( 4webkit4transition4duration : ( @duration ; ( transition4duration : ( @duration ; ( ( 4moz4transition4delay : ( @delay ; ( 4o4transition4delay : ( @delay ; ( 4webkit4transition4delay : ( @delay ; ( transition4delay : ( @delay ; ( (4moz4transition4timing4function : ( @timing ; ( 4o4transition4timing4function : ( @timing ; ( 4webkit4transition4timing4function : ( @timing ; ( transition4timing4function : ( @timing ;(}
#flower({ ( .transition( transform,1.5s,.1s,*ease5in ) ;(}
“Pro CSS for High Tra ffi c Websites” by Antony Kennedy & Inayaili de León procssforhightra ffi cwebsites.com
Resources
“CSS3 for Web Designers”, by Dan Cederholm http://www.abookapart.com/products/css3-for-web-designers
“Hardboiled Web Design”, by Andy Clarke http://fivesimplesteps.com/books/hardboiled-web-design
Surfin’ Safari http://www.webkit.org/blog/
Mozilla Developer Network https://developer.mozilla.org/en-US/
The Specification http://www.w3.org/
Considerations
F IREFOX IE W EB K IT O PERA 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
Final thoughts
“CSS3 Memory” http://media.miekd.com/css3memory/
“Kaleidoscope” http://www.kaleidoscopeapp.com/
“Reeder” http://reederapp.com/
Just because you can, doesn’t mean you should.
http://www.flickr.com/photos/8790226@N06/3577837508/
“The Illusion of Life: Disney Animation” by Ollie Johnston & Frank Thomas
“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”
“If the character has any append ages, 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”
Thank You! @yaili
