旋转css在chrome中不起作用

Question

好的，所以，我编写了一个代码，我正在寻找一个图像，永远旋转并且它可以工作，但只有在 Firefox 中，它在 chrome 中不起作用，有人可以帮忙吗？

代码：

<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

将您的 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');
});

Answer 2

您也需要 Keyframes 的前缀，因此将您的 CSS 更改为：

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

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