css3 keyframes hover animation firefox

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/

Surjith S M Surjith S M · Accepted Answer · 2014-01-06T13:39:43

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;
}

css3 keyframes hover animation firefox

1 Answers