transition

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

Compatibility

  • -webkit-transition Safari 5+ iOS 3.2+ Android 2.1+ Blackberry 7+
  • transition Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+ IE Mobile 10+

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

  • Firefox 16+
  • Safari 5+
  • Chrome 26+
  • Internet Explorer 10+
  • Opera 12.1+
  • iOS 3.2+
  • Android 2.1+
  • Blackberry 7+
  • IE Mobile 10+

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 instead of a smooth transition. For example to get an animation with 8 frames, you can use steps(8) (example).
  • 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.

  • http://www.osiris-web.co.uk/ Jamie

    Hi, great article, it showed me were I was going wrong for the “fading out”; although I do have an issue with the a:visited aspect – as if a page has already been visited (the link has been clicked on), the transition when you move your mouse off the link – transition out of (“fade out”) for the text-shadow (as you will see) quickly goes back to the “original state”, without the transition aspect (“fade out”)…

    My CSS:

    #header a:link.osirisnav {
    font: 20pt MuseoLite, “Myriad Pro”, “Trebuchet MS”, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
    font-weight: normal;
    color: #FFFFFF;
    text-decoration: none;
    text-shadow: 0px 2px 3px #000;
    transition: text-shadow 0px 2px 3px #000 2s;
    transition-duration: 2s;
    }
    #header a:visited.osirisnav {
    font: 20pt MuseoLite, “Myriad Pro”, “Trebuchet MS”, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
    font-weight: normal;
    color: #FFFFFF;
    text-decoration: none;
    transition: text-shadow 0px 2px 3px #000 2s;
    transition-duration: 2s;
    }
    #header a:hover.osirisnav {
    font: 20pt MuseoLite, “Myriad Pro”, “Trebuchet MS”, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
    font-weight: normal;
    color: #C2C2C2;
    text-decoration: none;
    text-shadow:; 0px 5px 6px #000;
    }

    I’ve tried removing the transition properties from the :visited aspect, but it doesn’t make any difference. Can anyone see were I am going wrong in regards to the links that have already been visited, the transition when you move your mouse off the link, why it doesn’t fade-out transition back to the original link state, as currently it just quickly “jumps” back to the original link state – yet when you move your mouse over a visited link, it transitions into the hover state… Any help would be great, thanks.

    • http://www.osiris-web.co.uk/ Jamie

      It actually just seems to be an IE issue, as I just checked via Firefox and it’s working the way I want it to – the transition effect (“fade-in/out”) for the color & text-shadow transition change works even after the link has been clicked on / visited – yet it doesn’t in IE – is there a “fix” for IE?

  • Andrew

    I am a new coder and I am looking to figure something out. In a navagation bar I am able to fade the color of the bar itself. I am also looking to fade the text from normal to bold. Any ideas?

    • Chris_Krammer

      As far as I know transitions from normal to bold are not possible (just like transitions from non-underlined to underlined text and vice versa).

  • Nils Sens

    I could imagine coding a media query that sets some arbitrary window size, below which it would be a ridiulously small desktop screen and then write a :focus transition for the smaller screen….

    Oh wait there are two problems – one, retina displays; two people who play with their browser window.

    Any thoughts on that?

    Thank you

    Nils Sens