transition

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

Compatibility

  • -moz-transition Firefox 4+
  • -webkit-transition Safari 5+, Chrome 10+
  • -o-transition Opera 11+
  • transition Official 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 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. step(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.

8 Comments

Add comment
  1. SourceReader

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

    1 Reply

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

    2 Reply
  3. 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?

    3 Reply

    • 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.

      4
  4. Benni

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

    5 Reply

  5. 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;
 }
    6 Reply

    • 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.

      7

    • 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>
      8

Add a comment

HTML: <a>, <code>, <pre> and <strong> are allowed
* Required