2

WebkitプロパティとCSS3を使用して、Webサイトで画像を回転させる簡単なアニメーションを作成しました。

ここでスタイルcss（divにのみ適用されます）

.bg {
    position: relative;
    top: 0px;
    left: 0px;
    display:block;
    -webkit-animation: spin 100s infinite linear;
    -moz-animation: spin 100s infinite linear;
    -o-animation: spin 100s infinite linear;
    -ms-animation: spin 100s infinite linear;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    z-index:-1;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg);}
  100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
    0% { -o-transform: rotate(0deg);}
  100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg);}
  100% { -ms-transform: rotate(360deg);}
}

その結果、Mozilla Firefox、Chrome、Safariでは問題なく動作しますが、OperaとInternetExplorerではアニメーションが表示されません。

4

2 に答える 2

6

http://caniuse.com/#feat=css-animation

IE10とOpera12はCSSアニメーションをサポートしています。以前ではありません。

于 2012-04-07T12:54:16.783 に答える
0

たぶん、この情報は、Opera12のアニメーションに問題がある人にとって役立つでしょう。

オペラ12.xでは、cssアニメーションプロパティ「infinite」が機能しませんでした。アニメーションは1回だけ実行され、その後停止されました。しかし、durationの整数値（たとえば1秒）を小数値（たとえば1.1秒）に変更した後、animationeは無限に再生を開始します。

于 2014-05-06T12:28:32.040 に答える