CSS3 Animate Out of :hover

css animation keyframe
Andrew picture Andrew · Nov 23, 2011 · Viewed 15.7k times · Source

I'm setting up a simple animation that brings up a little additional information when you hover over an image. The jQuery backup part is written and works fine, though the issue I'm having trouble with is getting the CSS3 animation to go in reverse when the user hovers out.

So when you hover in it works great, but as soon as you hover out the elements just disappear. What I'd like to know is if there's a way to get them to animate backwards when the mouse hovers elsewhere. Thanks a lot!

Answer

bookcasey picture bookcasey · Nov 23, 2011

You don't need keyframes for something as simple as this.

I made you a demo (with only -webkit vender prefixes to keep things simple).

Related questions

How to have css3 animation to loop forever

I want to have the whole set of animation to play forever. When the last photo fades off, I want the first one to appear again an so on. What I did (and I dont like) is set the page …

Read More
CSS-moving text from left to right

I want to create an animated HTML "marquee" that scrolls back and forth on a website: <div class="marquee">This is a marquee!</div> and the CSS: .marquee { position: absolute; white-space: nowrap; -webkit-animation: rightThenLeft 4s linear; } @…

Read More
How to prevent css keyframe animation to run on page load?

I have a div in which I animate the content: On hover content slides into the container div. My problem is, when I refresh the page, and the page loads the #content's animDown animation will run, and I'd prefer it …

Read More