CODEWITHSUNDEEP
htmlcss
edgarmtze
edgarmtze

Reputation: 25048

can not make to work fadein effect on hover of image with css3

I have css3 like:

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
img.fadeInDown:hover{
   -webkit-transform-origin: top center;
   -moz-transform-origin: top center;
   -o-transform-origin: top center;
   transform-origin: top center;
   -webkit-animation: fadeInDown 1s ease-in-out;
   -moz-animation: fadeInDown 2s ease-in-out;
   -o-animation: fadeInDown 2s ease-in-out;
   animation: fadeInDown 2s ease-in-out;
}

Applied to

<a  href="#" target="_blank" title="bing">
   <img class="fadeInDown" src="http://www.consortemarketing.com/wp-content/uploads/2011/10/bing-logo.png" /> 
</a>

However is not animating anything, could you please take a look at the fiddle and help me solve it?

Upvotes: 0

Views: 207

Answers (1)

apaul
apaul

Reputation: 16170

First some animations will not work well if using :hover mostly because it will require you to keep the mouse over the element while it is moving.

rollOut and fadeInDown are better used when activated on page load or when some other element is interacted with.

Second to activate an animation with :hover set it up like this:

.swing:hover{
   -webkit-transform-origin: top center;
   -moz-transform-origin: top center;
   -o-transform-origin: top center;
   transform-origin: top center;
   -webkit-animation: swing 2s ease-in-out;
   -moz-animation: swing 2s ease-in-out;
   -o-animation: swing 2s ease-in-out;
   animation: swing 2s ease-in-out;
}

then just set add the .swing class to elements you want to swing.

If you would like all images to swing when hovered:

    img:hover{
   -webkit-animation: swing 2s ease-in-out;
   -moz-animation: swing 2s ease-in-out;
   -o-animation: swing 2s ease-in-out;
   animation: swing 2s ease-in-out;
   }

Here's the jsFiddle Happy animating.

Upvotes: 1

Related Questions