Mimic ‘onmouseout’ with CSS3 Transitions

on | 8 Comments

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.

Advertise Here

8 Responses

  1. Mike:

    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. 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. Is there any option for automatic transition when page loads?

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.