Grow your CSS skills. Land your dream job.

transition

Last updated on:

The transition property is a shorthand property used to represent up to four transition-related longhand properties:

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. Here is a simple example that transitions the background color of a <div> element on :hover:

div {
  transition: background-color 0.5s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}

That div will take half a second when the mouse is over it to turn from red to green. Here is a live demonstration of such a transition:

Check out this Pen!

You can specify a particular property as we have above, or use a value of "all" to refer to transition properties.

div {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}
div:hover {
  background: green;
  padding: 20px;
}

In this above example, both background and padding will transition, due to the value “all” specified for the transition-property portion of the shorthand.

You may comma separate value sets to do different transitions on different properties:

div {
  transition: background 0.2s ease,
              padding 0.8s linear;
}

For the most part, the order of the values does not matter -- unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.

Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable.

By specifying the transition on the element itself, you define the transition to occur in both directions. That is, when the styles are changed (e.g. on hover on), they properties will transition, and when the styles change back (e.g. on hover off) they will transition. For example, the following demo transitions on hover, but not on hover off:

Check out this Pen!

This happens because the transition has been moved to the :hover state selector and there is no matching transition on the selector that targets the element directly without the :hover state.

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

.example {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}

IE10 (the first stable version of IE to support transition) does not require the -ms- prefix.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works 4+ 10.5+ 10+ 2.1+ 3.2+

Comments

  1. Thanks for all the goodies, Chris…I return to the site often for so many great tips and, well, “tricks.”

  2. keynentt
    Permalink to comment#

    tricks it is :) Thanks !

  3. Mike
    Permalink to comment#

    Thanks for this Chris. Your link to Adobe’s comprehensive guide tries to go to a subdirectory of your site. Might want to fix it.

  4. HJ
    Permalink to comment#

    Hi guys. This didn’t work for me in Firefox when using div image backgrounds. It works fine on Webkit browsers though. Any ideas?

  5. Herbyderby
    Permalink to comment#

    HJ, do you have the “-moz-transition:” in your CSS? Just making sure… And what version of FF? What OS?

  6. HJ
    Permalink to comment#

    Hi HJ, yes i do have the -moz-transition. I’m running Firfox 23.0.1 and Mac OS X Mavericks.

    • ITH
      Permalink to comment#

      I can confirm this. For some reason Firefox in OS X will apply both transitions on the hover over and hover out states, even when there is no transition information in the hover state.

  7. Permalink to comment#

    Hi Guys,

    This didn’t work while changing css3 background gradients and background images as well. How do i fix that? Please help me.

    Here is the code I used.

    .header_menu ul li {background:url(../images/menu_bg.png) left center no-repeat; width:auto;}
    
    .header_menu ul li a:hover{background:url(../images/menu_bg_hover.png) repeat-x; -webkit-transition: background 3s ease; -moz-transition: background 3s ease; transition: background 3s ease;
    }
    
    • AG Systems
      Permalink to comment#

      It looks like you’re using two separate elements – the first line targets the LI while the second targets the A:HOVER
      Try this instead:

      ` .header_menu ul li a {
              background:url(../images/menu_bg.png) left center no-repeat; 
              width:auto;
              -webkit-transition: background 3s ease;
              -moz-transition: background 3s ease;
              transition: background 3s ease;
      }
      
      .header_menu ul li a:hover{
              background:url(../images/menu_bg_hover.png) repeat-x; 
      }`
      

      Although I’m not sure how the change between non repeating and repeating backgrounds will be handled.

    • Crystal
      Permalink to comment#

      “background-image 3s ease;”

    • Yeah, linear gradient does not work for me either

  8. Permalink to comment#

    I found the tutorial useful and used some of the technique in my own website. Thanks.

  9. adarsh
    Permalink to comment#

    thanks Chris for all your
    help. ;->

  10. Permalink to comment#

    This is very good article for freshers

    i used in my applicaiton

    http://oldc.in

  11. Gwenvar
    Permalink to comment#

    Hi, I have a problem! The css works, but unlike the examples I’ve seen, mine automatically plays when the page loads:

    #box
        {
        /*usual properties go here*/
        box-shadow: 20px 20px 6px #000000;
        -webkit-transition: box-shadow 0.5s 0s ease;
        transition: box-shadow 0.5s 0s ease;
        }
    #box:hover
        {
        box-shadow: 20px 20px 6px #000088;
        }
    

    The problem here is that when the page loads, it does an animation from no shadow to shadow, and then on hover does what it has to (black to blue sh.). Is there any way to disable the first animation?

    • Herbyderby
      Permalink to comment#

      box

      {
      /*usual properties go here*/
      box-shadow: 20px 20px 6px #000000;
      -webkit-transition: box-shadow 0.5s 0s ease**-in**; 
      transition: box-shadow 0.5s 0s ease**-in**;
      }
      

      box:hover

      {
      box-shadow: 20px 20px 6px #000088 **ease-in**;
      }
      

      I think you need the “-in” or “-out” portion for the easing, no?

  12. Gwenvar
    Permalink to comment#

    I think you need the “-in” or “-out” portion for the easing, no?

    Nope, “ease”, “ease-in”, “ease-out” and “ease-in-out” are four different properties, and they cannot be the attribute of “box-shadow”.

    • Herbyderby
      Permalink to comment#

      Oops, I meant it would only go to the ‘transition’ attribute. Not on the ‘box-shadow’. So you don’t want the effect when the page loads, then remove the ‘transition’ from #box to #box:hover. Unless I am missing something.

      Do you have a link to a page we could see?

    • Gwenvar
      Permalink to comment#

      Okay, I got it, some of the elements in <form> was conflicting, like input type=”email”, and it caused a it to render improperly. I dunno why maybe just html5 bugs.

  13. Gwenvar
    Permalink to comment#

    Oh, okay, now it’s working fine. Because I removed the “border-image” property O.O. I have no idea why XD.

  14. Gwenvar
    Permalink to comment#

    Oh, wait no. Not that property. The original still doesn’ work properly, but I made an other copy of the css and the index file, where I only included that div element and it’s formatting in the css, and it worked fine. So it must be conflicting with other elements, so I guess I can’t get more help :/.

  15. arran
    Permalink to comment#

    Hi guys. My transitions work fine in IE and Chrome but not FF. I am running 28.0, OS Mavericks.
    I borrowed this code from http://css-tricks.com/downloads/css-stuff/ but I cant get it to work in FF. IE & Chrome all good.
    Very much learning stage for me.
    Thank you for the help.

    #banner {
    width: 600px;
    height: 200px;
    margin: 0px 10px 30px 50px;
    border: 8px solid #eee;
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
    border-radius:5px;
    }
    #banner div {
    position: absolute;
    }

    #banner div:nth-child(2) {

    -webkit-animation: wipe 6s infinite;
    -webkit-animation-delay: 3s;
    -webkit-animation-direction: alternate;
    -webkit-mask-size: 2000px 2000px;
    -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, 
            color-stop(0.00,  rgba(0,0,0,1)),
            color-stop(0.45,  rgba(0,0,0,1)),
            color-stop(0.50,  rgba(0,0,0,0)),
            color-stop(0.55,  rgba(0,0,0,0)),
            color-stop(1.00,  rgba(0,0,0,0)));
    

    }

    @-webkit-keyframes wipe {
    0% {
    -webkit-mask-position: 0 0;
    }
    100% {
    -webkit-mask-position: -1000px -1000px;
    }
    }

    #rollover {
    width: 250px;
    height: 250px;
    position: relative;
    border: 8px solid #eee;
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
    }

    #rollover div {
    position: absolute;
    top: 0;
    left: 0;
    }

    #rollover div:nth-child(2) {

    -webkit-transition: -webkit-mask-position 1s ease;      
    -webkit-mask-size: 600px 600px;
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, 
            color-stop(0.00,  rgba(0,0,0,1)),
            color-stop(0.35,  rgba(0,0,0,1)),
            color-stop(0.50,  rgba(0,0,0,0)),
            color-stop(0.75,  rgba(0,0,0,0)),
            color-stop(1.00,  rgba(0,0,0,0)));
    

    }

    #rollover div:nth-child(2):hover {
    -webkit-mask-position: -300px -300px;
    }

    • Permalink to comment#

      prefix -moz- to all your css3 codes and make another set of it as -webkit- is added

      like:-
      @-webkit-keyframes wipe {
      0% {
      -webkit-mask-position: 0 0;
      }
      100% {
      -webkit-mask-position: -1000px -1000px;
      }
      }
      /for firefox/
      @-moz-keyframes wipe {
      0% {
      -moz-mask-position: 0 0;
      }
      100% {
      -moz-mask-position: -1000px -1000px;
      }
      }

  16. mndawood
    Permalink to comment#

    Hello,
    Would you please let me know how to change the rotateX to simple sliding effect, in this javascript code.

    jQuery(".portfolio-item .portfolio-media-wrapper.gdl-image").hover(function(){
        if (jQuery.support.transition){ 
            jQuery(this).children('a.hover-wrapper').transition({ opacity: 0, rotateX: '180deg', duration: 0});
            jQuery(this).children('a.hover-wrapper').transition({ opacity: 1, rotateX: '0deg' });
        }else{
            jQuery(this).children('a.hover-wrapper').animate({ opacity: 1 });
        }
    }, function(){
        if (jQuery.support.transition){ 
            jQuery(this).children('a.hover-wrapper').transition({ opacity: 0, rotateX: '180deg' });
        }else{
            jQuery(this).children('a.hover-wrapper').animate({ opacity: 0 });
        }   
    });
    

    I appreciate your help.
    thanks

  17. thank you i love css3 and i like the tutoriel (y)

  18. So, I’ve yet to see this really documented anywhere… however extremely useful in my opinion..
    As I’m sure many other’s agree, being confined to transitions being triggered via hovering, can be quite a pain, and leaving this awesome feature nearly USELESS at times! (and then forcing the use of javascript in cases we should NOT have to) ..

    HOWEVER, I’ve just discovered by tinkering around with STYLE ELEMENT’s ‘MEDIA’ Attribute in combination with CSS3’s transition effects, we are VERY MUCH ABLE to trigger the transitions via a LIST of other events, WITHOUT the alternate use of ANY javascript/jquery what-so-ever for animations/fades/element-moving on window-resize, etc!

    (ex: [ STYLE MEDIA="all and (min-width: 600px)" ] )
    Leaving us actually quite a large number of new options, such as screen orientation: landscape/portrait; useful for mobile devices, etc! — find the full list on w3schools!

    I thought this was pretty awesome myself… thought I’d share.

    I’m sure Chris already new of this though…(lol) — He’s always had everything rearranging quite nicely upon window shrinking etc … (although I never actually LOOKED at the css-tricks.com code to be POSITIVE if this IS actually his method or not; but it definitely seems like it could’ve been, as the transitions are equally as smooth, etc..however, I must say, now that I just checked, the OLD css-tricks design USED-TO demonstrate this MUCH more than it does currently).

    Enjoy :)

  19. Mridul Borah

    Can we change the text color on page load without mouse hover. Just like a gif animation?

  20. fdaffas
    Permalink to comment#

    sfafdas af afs

  21. I’m still confusing with:
    -webkit-transition-timing-function:
    ‘s value…

  22. Ponzifex
    Permalink to comment#

    Nice article. Please write about transitions using svg. You can check the thumbnails at this 3D printer site

    css:
    .my-gallery .my-icon-gallery
    {
    position: absolute;
    z-index: 10000;
    top: 50%;
    left: 50%;
    right: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    display: inline-block;
    fill: rgba(255, 255, 255, 0);
    stroke: rgba(255, 255, 255, 1);
    stroke-width: .05em;
    stroke-opacity: 1;
    stroke-linecap: butt;
    stroke-linejoin: bevel;
    stroke-dasharray: 0, 150;
    -webkit-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
    -moz-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
    -ms-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
    -o-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
    transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
    }

    js: (when doc is ready)
    var url =’/css/simpleline-icons.svg';
    var c=new XMLHttpRequest(); c.open(‘GET’, url, false); c.setRequestHeader(‘Content-Type’, ‘text/xml’); c.send();
    document.body.insertBefore(c.responseXML.firstChild, document.body.firstChild)

    .my-gallery:hover > .my-icon-gallery
    {
    fill: rgba(255, 255, 255, 1);
    stroke-dasharray: 150, 1;
    stroke-opacity: 0;
    }

    .my-icon-gallery:after
    {
    content: ”;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    html:

    Looks good :)

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".