18 css transitions
DESCRIPTION
TRANSCRIPT
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/