Grow your CSS skills. Land your dream job.

Different Transitions for Hover On / Hover Off

Published by Chris Coyier

In other words, "Different transitions on mouseenter and mouseleave" as those are the DOM events that happen, but we're not using JavaScript here, we're talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates.

This is a simple trick. You set transitions on both states, like this:

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

When you hover over, the :hover transition overrides the transition set in the regular state, and that property animates. When you hover off, the transition from the regular state takes over and that property animates.

And now, here an offensively lame examples that you should never use:

View Demo

Comments

  1. Renee
    Permalink to comment#

    Interesting, has a wild spin in Chrome.

  2. Permalink to comment#

    Yep, dead cheezy but cool.

  3. Permalink to comment#

    As people said – cheezy but cool :)

    (trackback from Rinnku.com)

  4. Thats such an obnoxious button lol. Cool idea though

  5. Daniel Waltz
    Permalink to comment#

    That’s a nice trick, thanks for sharing!

  6. Permalink to comment#

    So simple! Thanks for the write-up Chris, made the logic real easy to follow.

  7. I really like your animated button – that will look really nice on my customer site. Could you kindly send teh codez to my e-mail address?

    • Permalink to comment#

      Right click and view source or inspect element – easiest way to grab the code! And in his examples Chris usually writes the CSS in the head instead of a linked file so it’s easier to grab the code.

  8. Chad Thoreson
    Permalink to comment#

    I’d be so afraid to hover off and get that crazy spin animation that I would convert every time. Diabolical! ;) Very nice Chris!

  9. Its awesome but I think it has no use of it…

    • Permalink to comment#

      Then you’re not a very good thinker… Use a fade and it fades in and out – looks really nice. Slight growth and shrinking looks nice, box-shadow can be used to give a feeling of depth with the transitions, countless applications with very little coding effort.

  10. Permalink to comment#

    Nice trick sir, I think i can experiment from this point onwards with this hover off thingy.

  11. I’d say this is incredibly useful. There are of course lots of fun & entertaining uses for this, but Chris has also showcased what I’d say is a key part in transitioning hover states.

    For example, you want a slow fade in color or opacity on a link (3s) or so— that could be so slow that users fail to even recognize the link when hovering. By specifying a shorter timing for the :hover state, you’ll be able to get a quick snap of the users attention on hover while retaining a smooth, slower fade out when the mouse leaves.

  12. Permalink to comment#

    Great fancy button but one problem when i hover over the button, the scrollbar appears.

  13. Permalink to comment#

    An interesting thing to remember when coming up with the ‘state’ transition is that it will activate on page load too…

    A good thing to remember if you have a 10 second flashing whirly thing that is supposed to be a top secret ‘mouse off’ event.

  14. andy
    Permalink to comment#

    My favorite part is how slow it runs. People keep pushing CSS3 over Flash for animation, but in the current state it’s too choppy to compete.

    • There are definitely concerns here. Especially with super simple little animations like that causing slowdowns. I wish there was some really good research on it.

  15. Cool. But a real buy now button would be red…

  16. Permalink to comment#

    the problem is how to give an animation on hover off using jQuery

  17. Permalink to comment#

    Nice trick. I will play around with it for a while and see how to make it a bit smooth. Thanks.

  18. andjamandja
    Permalink to comment#

    hi
    great web site ! thanx !!!

    how about telling us where to get the menu as you have here. ? ;)

  19. Permalink to comment#

    Inspired by your article I made this: http://userstyles.org/styles/43998

  20. Thomas
    Permalink to comment#

    I used this for an experimental dropdown navigation.
    For that navigation I’ve added a delayed transition of opacity and z-index on hover.
    See http://dl.dropbox.com/u/1496903/css3menu_1.html for the source.

    The relevant css:

    ul.nav ul {
                opacity: 0;               
                left: -50000%;
                position: absolute;
                transition: opacity 0.5s ease-in-out 0.2s, left 0 linear 0.7s, z-index 0 linear 0.2s;
                z-index: 1;
            }
    
            ul.nav li:hover > ul {
                opacity: 1;
                left: 0;
                transition: opacity 0.5s ease-in-out 0.2s, left 0 linear 0.2s, z-index 0 linear 0.2s;
                z-index: 2;
            }
    
  21. Thanks for your simple but handy post! I tried it out and I’m very happy to learn how easy transitions are in CSS3. And I didn’t know I can put a :hover on any div, I thought only on ‘s.

  22. Vipul
    Permalink to comment#

    Sir,
    I added few more things to animate my div element …

    three{

    height:45px;
    width:5px;
    -moz-transition:width 1s ease-in-out 0s,border-radius 1s ease-in 1s,transform 3s ease-out 0s;
    

    }

    three:hover{

    border-radius: 20px;
    width:160px;
    cursor:pointer;
    transform:translate(300px,-300px) scale(2) rotate(360deg);
    

    }

    The animation works fine, with the exception that when you remove your cursor from the element it abruptly stops. Is there anyway to force it to continue even if the mouse has exited?
    Also, it would be a great help if you could please tell me how can I trigger this animation on clicking the “#three” element ??

  23. Benny Neugebauer
    Permalink to comment#

    Brilliant! Thank you very much for showing this tip!

This comment thread is closed. If you have important information to share, you can always contact me.

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