旋转css不工作在铬

Question

好的，所以，我做了一个代码，我在找的是一个图像，永远旋转，它正在工作，但只在Firefox中，它不工作在铬，任何人都可以帮忙吗？

代码：

<div align="left" class="header"> 
<img src="http://files.enjin.com/177852/SD/PortalHeaderContinuous1.png" class="header2" style="position:fixed; z-index:50; margin-left:-120px; margin-top:20px;"> 
</div> 

<style> 

.header2{ 

animation: rotate 5s linear 0s infinite; 
-webkit-animation: rotate 1s linear 0s infinite; 
} 

@keyframes rotate 
{ 
0% {} 
100% {-webkit-transform: rotate(-360deg); 
-moz-transform: rotate(-360deg); 
transform: rotate(-360deg);} 
} 

</style> 

Answer 1

您需要为Keyframes前缀也让你的CSS改成这样：

@keyframes rotate 
{ 
0% {} 
100% {transform: rotate(-360deg);} 
} 
@-webkit-keyframes rotate 
{ 
0% {} 
100% {-webkit-transform: rotate(-360deg);} 
} 

演示http://jsfiddle.net/phk24/2/

Answer 2

你的CSS更改为：

.header2{ 
    -webkit-animation:rotate 4s linear infinite; 
    -moz-animation:rotate 4s linear infinite; 
    animation:rotate 4s linear infinite; 
} 

@-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); 

像this fiddle

CSS

div{ 
    display:inline-block; 
} 
.parent{ 
    border:1px solid grey; 
} 
.child{ 
    height:100px; 
    width:100px; 
    border-radius:9px; 
    background:blue; 
    margin:10px; 
} 

.rotate { 
    -webkit-animation:rotate 4s linear infinite; 
    -moz-animation:rotate 4s linear infinite; 
    animation:rotate 4s linear infinite; 
} 
@-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 

HTML

<div class='parent'> 
    <div class='child'> 
    </div>  
</div> 
<a id='rotate' href='#'>Rotate</a> 

jQuery的

$('#rotate').click(function(){ 
    $('.child').addClass('rotate'); 
});