基本CSS：

Question

我试图使用css3无限地翻转图像，但代码在firefox中无效。有些人可以指出这个问题。

<style>
    #slidecaption {
        -webkit-animation: rotation 1s infinite linear;
        -moz-animation: rotation 1s infinite linear;
        -ms-animation: rotation 1s infinite linear;
        -o-animation: rotation 1s infinite linear;
        animation: rotation 1s infinite linear;
    }

    @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }

        to {
            -webkit-transform: rotateY(359deg);
            -moz-transform: rotateY(359deg);
            -ms-transform: rotateY(359deg);
            -o-transform: rotateY(359deg);
            transform: rrotateY(359deg);
        }
    }
</style>

<div id="slidecaption" style="width: 200px; height: 200px; border: 1px solid #000;"></div>

Answer 1

此处小提琴：http://jsfiddle.net/9dqAK/7/

提示：您可以使用-webkit-animation-duration属性来提高或降低速度。延迟越高，动画越慢。

在 Firefox 上进行测试。 chrome 和 IE11 。

<强> HTML：

<img id="slidecaption" src="http://placehold.it/200x200" alt="placeholder" />

<强> CSS

#slidecaption {
   -webkit-animation-name: spinner; 
  -webkit-animation-timing-function: linear; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 2s; 
  animation-name: spinner; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-duration: 2s; 
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -ms-transform-style: preserve-3d; 
  transform-style: preserve-3d;
}


/* WebKit and Opera browsers */ 
@-webkit-keyframes spinner { 
  from 
  { 
    -webkit-transform: rotateY(0deg); 
  } 
  to { 
    -webkit-transform: rotateY(-360deg); 
  } 
} 
/* all other browsers */ 
@keyframes spinner { 
   from { 
    -moz-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
   } 
   to 
   { 
    -moz-transform: rotateY(-360deg); 
    -ms-transform: rotateY(-360deg); 
    transform: rotateY(-360deg); 

   } 
}

Answer 2

如果您希望它有争议地“翻转”，您应该使用infinite。

基本CSS：

div{ 
  animation: rotation 1s infinite linear; 
}

@keyframes rotation {
  100%{ transform:rotatey(360deg) }
}

样本：

html, body{ height:100%; }
body{ perspective:1000px; overflow:hidden; }

div{ 
  width: 100px;
  height: 200px;
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  margin: auto;
  
  background: lightblue;
  animation: rotation 1s infinite linear; 
}

@keyframes rotation {
  100%{ transform:rotatey(360deg); }
}

<div></div>

注意 - 您还应该使用autoprefixer

使用css3 3d的无限翻转图像

2 个答案:

基本CSS：

样本：