CSS Transitions Adding motion to your pages for fun and profit

Intro to transitions

� The transforms chapter showed us how to change HTML elements

� This chapter shows how to change them gradually

If it transforms, it can transition.

On the element you want to have animate, add the following CSS #id_of_element {! /* Chrome and Safari */! -webkit-transition: all 1s ease-in-out;!

/* Firefox */! -moz-transition: all 1s ease-in-out;!

/* Opera */! -o-transition: all 1s ease-in-out;! /* Internet Explorer */!

-ms-transition: all 1s ease-in-out;! /* Everything */! transition: all 1s ease-in-out;!

}!

Demo: Simple transition Hands-on simple transition

Transitions degrade gracefully

�  If the browser doesn't support it, they still transform, but do it quickly

Full syntax of transitions transition: <property> <duration> <timing-function> <delay>!

The property is the thing you want transitioned

� background-color � height � width �  top �  left �  rotation � … or … �  all

The duration is how long we should take to transition from the first state to the last

�  In seconds or milliseconds � 5s � 5000ms

The timing function tells how the transition accelerates over time

�  cubic-bezier(a, b, c, d) �  linear � ease � ease-in � ease-out � ease-in-out

The transition delay tells how long to wait before beginning �  Seconds or milliseconds

Put them all together like so … !#theDiv {! width: 10px;! transition-property: width;! transition-duration: 2s;! transition-timing-function: ease-in-out;! transition-delay: 1s;!}!

… or … #theDiv {! width: 10px;! transition: width 2s ease-in-out 1s;!} !

Just like with transforms, you need to prefix some of the transitions with the engine

-webkit-transition: all 0.5s ease-in-out; !-moz-transition: all 0.5s ease-in-out;!-ms-transition: all 0.5s ease-in-out;!transition: all 0.5s ease-in-out;!

Demo: Basic transitions Hands-on basic transitions

We can combine transitions

#theDiv { transition-property: top, left; transition-duration: 3s, 1s; transition-delay: 0s, 3s; }

Demo: Combined transitions Hands-on combined transitions

Conclusion

� The new transition features allow us to create smooth transforms

� We no longer need JavaScript or DHTML. It can all be done with CSS

� We can tune the duration, initial delay, and the easing function

� We can combine transitions to make it really look good

Further resources

� W3C Transition spec ◦  http://www.w3.org/TR/css3-transitions/#properties-

from-css

� Good transition tutorials ◦  http://www.w3schools.com/css3/

css3_transitions.asp ◦  http://css3.bradshawenterprises.com/transitions/