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

您还需要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');
});

旋转css不工作在铬

2 个答案: