css3 keyframes hover animation firefox - css

Question

I created some keyframes animation to animate div on mouse hover in pure css3.
It works great in every browsers (google chrome, safari, IE, opera) execpted in FIREFOX!
I really don't know why it didn't works only in firefox. The animation won't works on mouseover but works on load....
Here a css example of keyframe :
#-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
20% { -webkit-transform: rotate(15deg); }
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swing {
20% { -moz-transform: rotate(15deg); }
40% { -moz-transform: rotate(-10deg); }
60% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-5deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swing {
20% { -o-transform: rotate(15deg); }
40% { -o-transform: rotate(-10deg); }
60% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-5deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.col:hover .swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation: swing 1s linear;
-moz-animation: swing 1s linear;
-o-animation: swing 1s linear;
animation: swing 1s linear;
}
.swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation: swing 1s linear 1s;
-moz-animation: swing 1s linear 1s;
-o-animation: swing 1s linear 1s;
animation: swing 1s linear 1s;
}
.col,
.th-icon {
position: relative;
margin: 40px 0 0 100px;
width: 200px;
height: 200px;
}
i.swing {
display: block;
width: 200px;
height: 200px;
background: grey;
}
And the fiddle: http://jsfiddle.net/ktxDp/1/

Answer 1

May be Firefox doesn't allow same animation twice.
It worked when I called the animation only once. Working Demo
.col:hover .swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation: swing 1s linear;
-moz-animation: swing 1s linear;
-o-animation: swing 1s linear;
animation: swing 1s linear;
}