transition
Instead of a value’s normal behavior to change immediately it is faded smoothly.
Compatibility
-moz-transitionFirefox 4+-webkit-transitionSafari 5+, Chrome 10+-o-transitionOpera 11+transitionOfficial syntax
Not supported by Firefox 3.6 and Internet Explorer 9. For detailed compatibility info see caniuse.com.
- Firefox 4+
- Safari 5+, Chrome 10+
- Opera 11+
- Official syntax
No betas, nightlies or suchlike, only final versions. Safari includes mobile browsers based on Webkit.
General description
Combined notation
Multiple transitions can be specified comma separated. There is also the possibility for separated notations.
transition: 1 background-color 2 2s 3 linear 4 0.5s
- 1 The CSS property to be transitioned. Many of the available properties can be animated. Can also be
allif all given properties for an element should be transitioned, for examplebackground-colorandwidthat the same time. If set tononeno transition is executed. - 2 The transition lasts
2seconds (the duration). Defaults to0meaning that there is no transition at all (like the normal behavior of a status change). Negative values are not allowed. - 3 Optional. The timing-function, which describes how the transition will proceed over its duration. It is specified using a bezier curve (and can also be set as one). At the given example the animation is played
linearwithout an acceleration or a slowdown. Defaults toeasewhich results in a fast beginning and a slowdown at the end.ease-outis quite the same but not so fast at the beginning.ease-inaccelerates the animation smoothly at the beginning with no slowdown at the end. At lastease-in-outstands for an acceleration at the beginning and a slowdown at the end.
There is also the possibility of step-values, which let the animation jump between the individual keyframes, wherebystep-startomits the first keyframe andstep-endthe last one.step(X, start/end)in turn enables to define how many steps are shown between each keyframe, whereXstands for the steps andstart/enddefines if the first or the last keyframe should be omitted (defaults toendif omitted). - 4 Optional. The transition starts with a delay of
0.5seconds. If not set or set to0it will begin immediately, if negative it will begin part-way through its play cycle.
Separated notations
Results in the same transition like above.
transition-property: background-color
transition-duration: 2s
transition-timing-function: linear
transition-delay: 0.5s
Example
Multiple transitions set
transition: 1 width 3s, 2 opacity 2s 3s ease-in
- 1 The
widthof the element is transitioned over a period of3seconds. Sincetransition-durationandtransition-timing-functionare absent the animation starts immediately with a acceleration at the beginning and a slowdown at the end (ease, standard value). - 2 The transition of the element’s
opacitylasts2seconds and starts after3seconds. That is, that the animation of theopacitystarts not until the animation of thewidthis already over. At last it has smooth acceleration at the beginning and no slowdown at the end (ease-in).
Further reading
For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).


Transition does not seem to work on safari 5 if used on :after pseudo element.
Yes, transitions on pseudo elements just work on Firefox 5 right now as soon as I know.
Hi @ all,
I’ve got a little question.
You’r first example shows a fade in hover effect and also a fade out effect by leaving the box with the mouse. How can I do that?
if i do that
-css
.contentbox {
width: 300px;
height: 150px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background: #ECAC00;
}
.fc:hover {
background: #192028;
transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
}
-html
The color changed immediately after leaving the box with the mouse. Where’s the mistake? Can you help me?
Hey Benni!
First thing: If you want to use HTML code in the comments you have to change all the < and > characters with &lt; and &gt; because otherwise you would write real HTML code and that’s not ideal for the comments.;)
Now to your actual question: transition effects have to be applied to the normal state of the element/link and not to the hover state. Moreover the fade-out doesn’t have to be stated explicitly, it happens automatically whenever you specify a transition.
If it still doesn’t work please post the source code of the regarding link you want to apply a transition to in the mentioned manner. I’d be glad to help.
Ahhhhh, thx for the fast reply. Ok, so my mistake was adding the transition to the hover.
thx!
Now everything works fine
Hi, i want to animate the Text-decoration:underline on hover effect so what can i do
here is my code:
#menu { margin-top:0px; color:#d9d5e2; font-weight:bold; -webkit-transition: -webkit-transform 1s; } #menu ul { list-style:none; text-decoration:none; } #menu li { float:left; margin-top:-12px; padding-left:20px; display:inline-block; font-size:15px; text-decoration:none; font-family:sans-serif; font-size:13px; text-shadow: 1.5px 1px 1.5px #705f5f; } #menu li a { color:#d9d5e2; text-decoration:none; } #menu li a:hover { -webkit-transform:rotate(45deg); color:#d9d5e2; text-decoration:underline; } #menu li img { margin-top:-2.2px; }Sorry for my late reply.
Unfortunately the
text-decorationproperty can’t be animated (same goes for transitions), like stated here: http://www.w3.org/TR/css3-transitions/#animatable-properties-BTW, if you want the transformation to show up at the hover state of the link, you have to apply
display: blockto it.You can get your animated underline effect by using
border-bottominstead oftext-decoration. Here is a complete working example. I also fixed the rotation effect.<!DOCTYPE html><html><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style> #menu { margin-top:0px; color:#d9d5e2; font-weight:bold; } #menu ul { list-style:none; } #menu li { float:left; margin-top:-12px; padding-left:20px; display:inline-block; font-size:15px; text-decoration:none; font-family:sans-serif; font-size:13px; text-shadow: 1.5px 1px 1.5px #705f5f; } #menu li img { margin-top:-2.2px; } #menu li a { display: inline-block; text-decoration: none; border-bottom: 2px solid rgba(217,213,226,0); -webkit-transform: rotate(0); -webkit-transition: all 1s } #menu li a:hover { border-bottom-color: rgba(217,213,226,1); -webkit-transform: rotate(45deg); } </style> </head> <body bgcolor="#888888"> <div id="menu"> <ul> <li><a>Firefox</a></li> <li><a>Chome</a></li> <li><a>Opera</a></li> <li><a>Safari</a></li> <li><a>IE 10</a></li> </ul> </div> </body> </html>