2

シンプルなcss3アニメーションを機能させようとしています。今のところ、Firefox では問題なく動作しますが、Chrome や Safari では動作しません。

すべてのブラウザーで動作するように追加しまし@-webkit-keyframesた (IE ではない可能性があります)。

これは私のcssです：

.myFace {
        display: block;
        width: 266px;
        height: 266px;
        background: url(http://cl.ly/image/443k292m2C24/face2x.png) no-repeat 0 0;}
.myFace:hover {
    animation: threesixty 1s;
    -webkit-animation: threesixty 1s; /* Safari and Chrome */
}
@keyframes threesixty {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes threesixty {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

これは私がやろうとしていることです - http://jsfiddle.net/dansku/JTcxH/4/

4

2 に答える 2

4

これは、キーフレーム内で、transform:IE10、Firefox、および Opera で機能する を使用しているが、Webkit に相当するもの、特に-webkit-transformChrome と Safari で機能するものを持っていないためだと思います。

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

-ms-IE のバージョンが 10 より前の場合は、上に示したようにプレフィックスも含める必要があります。

于 2013-05-30T22:45:14.013 に答える
3

変換に関する MDN の記事から:

Webkit ブラウザー (Chrome、Safari) では引き続き-webkit変換用のプレフィックスが必要ですが、バージョン 16 の Firefox では必要ありません。

このコードはあなたのために仕事をするはずです:

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

Opera と IE9+ をサポートするには、それぞれプレフィックス-oと-msプレフィックスを使用します。(IE10 ではプレフィックスは必要ありません)

于 2013-05-30T22:45:33.760 に答える