I have been working on a CSS3 animation that involves rotating a div with an image in the background.
My goal is to have the same animation play at a different speed when the user hovers over the element.
Here is the code snippet I have been using:
.rocket{
background: url('http://thumbs.ebaystatic.com/d/l96/m/mR3-h7oYVSGGYNTBiKJbtMQ.jpg') no-repeat center;
width: 200px;
height: 200px;
-webkit-animation : spin 1500ms linear infinite;
animation : spin 1500ms linear infinite;
}
.rocket:hover{
-webkit-animation : spin 500ms linear infinite;
animation : spin 500ms linear infinite;
}
@-webkit-keyframes spin{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<div class="rocket"></div>
However, I noticed that the hover animation only works in firefox and not in chrome.
As a workaround, I created a separate animation for hover with a different name and it worked as expected:
.rocket{
background: url('http://thumbs.ebaystatic.com/d/l96/m/mR3-h7oYVSGGYNTBiKJbtMQ.jpg') no-repeat center;
width: 200px;
height: 200px;
-webkit-animation : spin 1500ms linear infinite;
animation : spin 1500ms linear infinite;
}
@-webkit-keyframes spin{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rocket:hover{
-webkit-animation : spin2 500ms linear infinite;
animation : spin2 500ms linear infinite;
}
@-webkit-keyframes spin2{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin2{
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Could someone explain why this discrepancy exists and how I can make the hover animation work consistently across browsers like chrome?