CSS3 Animation | Simple issue - animation

Question

I have the following CSS code :
#keyframes hvr_shadow
{
from
{
box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
}
to
{
box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
}
}
#-moz-keyframes hvr_shadow /* Firefox */
{
from
{
-moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
}
to
{
-moz-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
}
}
#-webkit-keyframes hvr_shadow /* Safari and Chrome */
{
from
{
-webkit-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
}
to
{
-webkit-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
}
}
#gallery .fancybox
{
border: 1px solid #333;
display: block;
padding: 0;
margin: 0;
height: 138px;
-moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
-webkit-box-shadow: 0px 0px 0px rgba(60, 60, 60, 0.5);
box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
}
#gallery .fancybox:hover
{
animation: hvr_shadow 700ms;
-moz-animation: hvr_shadow 700ms; /* Firefox */
-webkit-animation: hvr_shadow 700ms; /* Safari and Chrome */
-o-animation: hvr_shadow 700ms; /* Opera */
}
While the animation is working, after a while the shadow auto return to primary settings.
How can I keep the settings of the animation while the mouse is still hovering the image ?
Here you can find a Fiddle demo : http://jsfiddle.net/haX8j/

Answer 1

This will solve your problem:
-webkit-animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards;
-moz-animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards;
-o-animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards;
animation: hvr_shadow 700ms .1s 1 ease-in-out normal forwards;
JS Fiddle: http://jsfiddle.net/haX8j/1/

Answer 2

Actually I think you are better off using a transition. It's far simpler, it works with Firefox and it will fade out correctly when moving off the link:
.link
{
-moz-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
-webkit-box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
box-shadow: 0px 0px 4px rgba(60, 60, 60, 0.5);
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
}
.link:hover
{
-moz-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
-webkit-box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
box-shadow: 0px 0px 6px rgba(60, 60, 60, 0.8);
}
Here is a fiddle example. I've made the shadow much bigger so you can see the effect more clearly: http://jsfiddle.net/DYdZs/