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(flower-1.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, -50px) scale(1.5) rotate(15deg) skew(15deg); }

#flower:hover { transform: translate(600px, -50px) scale(1.5) rotate(15deg) skew(15deg); transform-origin: 0 0; }

3D Transforms

scale scale3d scaleX scaleY scaleZ

translate translate3d rotate rotate3d matrix matrix3d

perspective-origin

backface-visibility

body { perspective: 1000; perspective-origin: 50% 100%; }

#kitten { margin: auto; display: block; }

#kitten:hover { transform: rotateY(-25deg); }

#level1 { background: url(kitten.jpg) no-repeat; width: 500px; height: 333px; transform: rotateY(-25deg); transform-style: preserve-3d; }

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

Transitions

#flower { background: url(flower-1.png); width: 300px; height: 300px; }

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

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

#flower { background: url(flower-1.png); width: 300px; height: 300px; transition: all 1.5s ease-in .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% { background-color: #daf2f4; } 50% { background-color: #f7d518; } 100% { background-color: #f5700d; } }

#box { animation-name: sky; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }

#box { animation: sky 10s linear infinite alternate; }

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

#flower-1, #flower-2, #flower-3 { animation: spin .7s linear infinite; }

Vendor Prexes

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

#flower:hover { -moz-transform: translateX(600px); -ms-transform: translateX(600px); -o-transform: translateX(600px); -webkit-transform: 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; border-radius: 4px; }

.box { background: red; .borders; }

.box { background: red; border: 1px solid black; border-radius: 4px; }

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

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

#flower { .transition(transform, 1.5s, .1s, ease-in); }

Pro CSS for High Trac Websites

by Antony Kennedy & Inayaili de Len
procssforhightracwebsites.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://vesimplesteps.com/books/hardboiled-web-design

Surn Safari
http://www.webkit.org/blog/

Mozilla Developer Network

https://developer.mozilla.org/en-US/

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

Considerations

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

Final thoughts

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

Kaleidoscope
http://www.kaleidoscopeapp.com/

Reeder
http://reederapp.com/

Just because you can, doesnt mean you should.

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

The Illusion of Life: Disney Animation

by Ollie Johnston & Frank Thomas

Anything composed of living esh, 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 appendages, such as long ears or a tail or a big coat, these parts continue to move a er the rest of the gure has stopped.
Ollie Johnston & Frank Thomas, The Illusion of Life: Disney Animation

Thank You!
@yaili