CSS3 Transforms, Transitions & Animations

A presentation at standards>next in May 2011 in London, UK by Inayaili de León

Slide 1

Slide 1

CSS3 Transforms, Transitions & Animations @yaili

Slide 2

Slide 2

2D Transforms

Slide 3

Slide 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/

Slide 4

Slide 4

#flower({ ( background : ( url(flower41.png) ; ( width : ( 300px ; ( height : ( 300px ; ( } #flower:hover({ ( transform : * translateX(600px) ; (}

Slide 5

Slide 5

Slide 6

Slide 6

translate,(translateX,(translateY scale,(scaleX,(scaleY rotate skew,(skewX,(skewY matrix

Slide 7

Slide 7

#flower:hover({ ( transform : ( translate(600px,(450px)(scale(1.5)( ➥ rotate(15deg)(skew(15deg) ;(}

Slide 8

Slide 8

Slide 9

Slide 9

#flower:hover({ ( ( transform : ( translate(600px,(450px)(scale(1.5)( ➥ ( rotate(15deg)(skew(15deg) ; ( transform5origin : * 0*0 ; ( }

Slide 10

Slide 10

Slide 11

Slide 11

3D Transforms

Slide 12

Slide 12

scale(→(scale3d scaleX scaleY scaleZ

Slide 13

Slide 13

translate(→(translate3d rotate(→(rotate3d matrix(→(matrix3d

Slide 14

Slide 14

perspective4origin

Slide 15

Slide 15

backface4visibility

Slide 16

Slide 16

body({ ( perspective : ( 1000 ; ( perspective4origin : ( 50%(100% ;(} #kitten({ ( margin : ( auto ; ( display : ( block ;(} #kitten:hover({ ( ( transform : * rotateY(525deg) ; (}

Slide 17

Slide 17

Slide 18

Slide 18

#level1({ ( background : ( url(kitten.jpg)(no4repeat ; ( width : ( 500px ; ( height : ( 333px ; ( transform : ( rotateY(425deg) ; ( ( transform5style : * preserve53d ; (}

Slide 19

Slide 19

#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) ; (}

Slide 20

Slide 20

Slide 21

Slide 21

Transitions

Slide 22

Slide 22

#flower({ ( background : ( url(flower41.png) ; ( width : ( 300px ; ( height : ( 300px ;(} #flower:hover({ ( transform : ( translateX(600px) ;(}

Slide 23

Slide 23

#flower({ ( background : ( url(flower41.png) ; ( width : ( 300px ; ( height : ( 300px ; ( transition5property : * transform ; * * transition5duration : * 1.5s ; * transition5delay : * .1s ; * * transition5timing5function : * ease5in ; (} #flower:hover({ ( ( transform : ( translateX(600px) ;(}

Slide 24

Slide 24

#flower({ ( background : ( url(flower41.png) ; ( width : ( 300px ; ( height : ( 300px ; ( ( transition : ( all1.5sease5in*.1s ;(}

Slide 25

Slide 25

Animations

Slide 26

Slide 26

“CSS Animations allow an author to modify CSS property values over time.” —W3C, http://www.w3.org/TR/css3-animations/

Slide 27

Slide 27

@keyframes(sky({ ( 0%({ ( background4color : ( #daf2f4 ;(} ( 50%({ ( background4color : ( #f7d518 ;(} ( 100%({ ( background4color : ( #f5700d ;(} }

Slide 28

Slide 28

#box({ ( animation4name : ( sky ; ( animation4duration : ( 5s ; ( animation4timing4function : ( linear ; ( animation4iteration4count : ( infinite ; ( animation4direction : ( alternate ;(}

Slide 29

Slide 29

#box({ ( animation : ( sky10slinearinfinitealternate ;(}

Slide 30

Slide 30

Slide 31

Slide 31

@keyframes(spin({ (0%({ (( transform : ( rotate(0deg) ;(} ( 100%({ (( transform : ( rotate(180deg) ;(} }

Slide 32

Slide 32

#flower41, #flower42, #flower43({ ( animation : ( spin(.7s(linear(infinite ;(}

Slide 33

Slide 33

Slide 34

Slide 34

Vendor Prefixes

Slide 35

Slide 35

#flower:hover({ ( ( transform : ( translateX(600px) ;(}

Slide 36

Slide 36

#flower:hover({ ( 5moz5transform : * translateX(600px) ; * 5ms5transform : * translateX(600px) ; * 5o5transform : * translateX(600px) ; * 5webkit5transform : * translateX(600px) ; ( transform : ( translateX(600px) ;(}

Slide 37

Slide 37

“Comparison of layout engines” http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

Slide 38

Slide 38

“When can I use…” http://caniuse.com/

Slide 39

Slide 39

Dynamic CSS

Slide 40

Slide 40

LESS & Sass

Slide 41

Slide 41

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

Slide 42

Slide 42

.translateX*(@valueX:"") ({ ( 4moz4transform : ( translateX( @valueX ) ; ( 4ms4transform : ( translateX( @valueX ) ; ( 4o4transform : ( translateX( @valueX ) ; ( 4webkit4transform : ( translateX( @valueX ) ; ( transform : ( translateX( @valueX ) ;(} #flower:hover({ ( ( .translateX( 600px ) ;(}

Slide 43

Slide 43

.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 ;(}

Slide 44

Slide 44

#flower({ ( .transition( transform,1.5s,.1s,*ease5in ) ;(}

Slide 45

Slide 45

“Pro CSS for High Tra ffi c Websites” by Antony Kennedy & Inayaili de León procssforhightra ffi cwebsites.com

Slide 46

Slide 46

Resources

Slide 47

Slide 47

“CSS3 for Web Designers”, by Dan Cederholm http://www.abookapart.com/products/css3-for-web-designers

Slide 48

Slide 48

“Hardboiled Web Design”, by Andy Clarke http://fivesimplesteps.com/books/hardboiled-web-design

Slide 49

Slide 49

Surfin’ Safari http://www.webkit.org/blog/

Slide 50

Slide 50

Mozilla Developer Network https://developer.mozilla.org/en-US/

Slide 51

Slide 51

The Specification http://www.w3.org/

Slide 52

Slide 52

Considerations

Slide 53

Slide 53

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

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

Final thoughts

Slide 57

Slide 57

“CSS3 Memory” http://media.miekd.com/css3memory/

Slide 58

Slide 58

“Kaleidoscope” http://www.kaleidoscopeapp.com/

Slide 59

Slide 59

“Reeder” http://reederapp.com/

Slide 60

Slide 60

Just because you can, doesn’t mean you should.

Slide 61

Slide 61

http://www.flickr.com/photos/8790226@N06/3577837508/

Slide 62

Slide 62

“The Illusion of Life: Disney Animation” by Ollie Johnston & Frank Thomas

Slide 63

Slide 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”

Slide 64

Slide 64

“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”

Slide 65

Slide 65

Slide 66

Slide 66

Thank You! @yaili