I implemented keyframes animation for a div on mouse hover using pure CSS3.
The animation runs smoothly on all browsers (Google Chrome, Safari, IE, Opera) except for Firefox!
I'm puzzled as to why it doesn't work only in Firefox. The animation kicks in on load but not on mouseover...
Here is a CSS example of the 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;
}
Check out the fiddle here: http://jsfiddle.net/ktxDp/1/