transition

Instead of a value’s normal behavior to change immediately it is faded smoothly.

Compatibility

  • -webkit-transition Safari 5+
  • transition Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Not supported by Internet Explorer prior to version 10. For detailed compatibility info see caniuse.com.

  • Firefox 16+
  • Safari 5+
  • Chrome 26+
  • Internet Explorer 10+
  • Opera 12.1+

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 all if all given properties for an element should be transitioned, for example background-color and width at the same time. If set to none no transition is executed.
  • 2 The transition lasts 2 seconds (the duration). Defaults to 0 meaning 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 linear without an acceleration or a slowdown. Defaults to ease which results in a fast beginning and a slowdown at the end. ease-out is quite the same but not so fast at the beginning. ease-in accelerates the animation smoothly at the beginning with no slowdown at the end. At last ease-in-out stands 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, whereby step-start omits the first keyframe and step-end the last one. steps(X, start/end) in turn enables to define how many steps are shown between each keyframe, where X stands for the steps and start/end defines if the first or the last keyframe should be omitted (defaults to end if omitted).
  • 4 Optional. The transition starts with a delay of 0.5 seconds. If not set or set to 0 it will begin immediately, if negative it will begin part-way through its play cycle.
Example
Hover over me and then inspect me!?

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 width of the element is transitioned over a period of 3 seconds. Since transition-duration and transition-timing-function are 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 opacity lasts 2 seconds and starts after 3 seconds. That is, that the animation of the opacity starts not until the animation of the width is 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).

x The live example can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.
  • SourceReader

    Transition does not seem to work on safari 5 if used on :after pseudo element.

  • http://www.css3files.com Christian Krammer

    Yes, transitions on pseudo elements just work on Firefox 5 right now as soon as I know.

  • Benni

    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?

    • http://www.css3files.com Christian Krammer

      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.

  • Benni

    Ahhhhh, thx for the fast reply. Ok, so my mistake was adding the transition to the hover.
    Now everything works fine :) thx!

  • http://forum.bssef10.com Assassins Mind

    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;
 }
    • http://www.css3files.com Christian Krammer

      Sorry for my late reply.

      Unfortunately the text-decoration property 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: block to it.

    • http://gkdesign.ca Tom Robinson

      You can get your animated underline effect by using border-bottom instead of text-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>
  • http://www.epik.com Jacob Gregory

    Yea i personally wouldn’t use this function ever or at least for the next 10 years… Not very browser friendly so you would have to back-foot your code to allow for older browsers so just means more coding.

    Personally for the time being everyone should just stick with jQuery for transitions and effects like this as it is more fluid and accepted by basically every browser.

    Hope my input helps :)

    Cheers,
    Jacob

    • http://www.css3files.com Christian Krammer

      The real problem in my eyes is a different one: “mobile” browsers. Since there is no mouse pointer you also see no transitions (at least unless you actually tap on the element). And since mobile will get stronger and stronger, transitions may disappear more and more. They will always be relevant for “desktop”, but maybe there will come a time the benefit doesn’t justify the effort anymore.

  • Brendufat

    Hallo. A small error to correct about transition-timing-function : a stepping function is specified with steps(X,start/end) and not step(X,start/end) – besides, YAGA (yet another good article) :-)

    • Chris_Krammer

      Thanks for the tip, Brendufat. I’ve corrected the error.