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

.borders({ ( border : ( 1px(solid(black ; ( border4radius : ( 4px ;(} .box({ ( background : ( red ; ( .borders ; (} .box({ ( background : ( red ; ( border : * 1pxsolidblack ; * border5radius : * 4px ; (}

.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