CodeinWP CodeinWP

Mimic ‘onmouseout’ with CSS3 Transitions

Here’s a crazy and ridiculous tip that probably has limited uses, but illustrates some quirky possibilities with CSS3 transitions. I’ve written something about this before and Chris Coyier explained the basic concept on his site.

But in this quick post I’ll show you how to make an element have a “mouseout” or “mouseleave” transition with no “mouseover” or “mouseenter” transition. Here’s the code:

.mouseout {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  background-color: #bada55;
  -webkit-transition: -webkit-transform 2s linear;
  -moz-transition: -moz-transform 2s linear;
  -o-transition: -o-transform 2s linear;
  transition: transform 2s linear;
}

.mouseout:hover {
  cursor: pointer;
  -webkit-transition: -webkit-transform 0s linear;
  -moz-transition: -moz-transform 0s linear;
  -o-transition: -o-transform 0s linear;
  transition: transform 0s linear;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

And here’s the demo page link:

Notice what happens when you hover on and off. Hovering on seems to have no effect, but then hovering off causes the element to animate a rotation transform.

How Does it Work?

There’s nothing too tricky going on here. Firstly, we take advantage of the fact that you can have different transitions for hovering on, and hovering off. Second, we use a timing of 0s to disguise the hover on.

You’ll notice on hover we’re rotating the box 360 degrees. This doesn’t change the box’s position at all, because 360 degrees means it comes back ‘full circle’ to where it started. But because the transition is taking place over a time of zero seconds, that means it’s instantaneous. So it appears as if there is no transition taking place at all.

Update: As pointed out by Federico, the transition lines of code that use “0s” could instead each be written as transition: none, which has the same effect.

Then, when you hover-off, the hover off transition on the element takes place, thus returning the box to its original state — even though it already is in its original state. The hover-off transition takes place over a duration of two seconds, thus making the transition visible and giving the false appearance of a mouseout event occurring without a mouseover event.

Interesting, but probably very limited in possibilities. I really can’t think of any other property that could give the appearance of no hover-on transition. Let me know if you can think of another way to do this with CSS alone.

9 Responses

  1. Mike says:

    I like the background colour hex!!!

  2. You could use transition: none rather than transition: transform 0s linear;, it’s shorter and probably slightly more performant since you’re disabling transitions completely.

    • You’re right! I didn’t even think of that. That’s much cleaner, I’ll post an update.

      My first reaction was that “none” would be the same as removing the transition on hover altogether. But it actually has the same effect as above. Thanks, excellent performance tip. :)

  3. Paul Irish says:

    FYI from my testing Chrome Canary and Webkit Nightly are broken in this regard. Maybe the spec disallows it? Anyway I filed a ticket: https://bugs.webkit.org/show_bug.cgi?id=84971

    • Hmm that’s weird. It must be a bug, because even if you bring the timing of the transition up from “0” to “.02s”, it still doesn’t spin back on mouseleave, which it should.

  4. Kedar says:

    Is there any option for automatic transition when page loads?

  5. Jayleloobee says:

    Thank’s a lot for this nice full css trick, this is exactly what I was looking for !!

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).