0

このキーフレームを定義しました：

@-moz-keyframes rotate{
    0%{
        -moz-transform: rotate(0deg);   
    }
    100%{
        -moz-transform: rotate(359deg);
    }
}

そしてクラス名に適用されます：

.rotate{
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -moz-animation-name: rotate;
}

そして、必要に応じて要素にクラスを追加します。

$('a').click(function(){ $(this).addClass('rotate'); });   /* and the class is applied */

ただし、アイテムは回転しません。私は何を間違っていますか？

注意: 私は firefox でのみテストしています。そのため、-moz- ベンダー プレフィックスのみを使用しています。

4

2 に答える 2

1

期間を追加します。

.rotate{
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -moz-animation-name: rotate;
  -moz-animation-duration: 1s;
}

期間は、各回転にかかる時間を定義します。設定しない場合、デフォルトは zeroです。

于 2013-07-09T14:06:21.497 に答える
-2

これが実際の例です

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 1s infinite;
-webkit-animation:myfirst 1s infinite; /* Safari and Chrome */
}

@keyframes myfirst
{
from {background:red;transform:rotate(0deg);}
to {background:yellow;transform: rotate(360deg);}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;-webkit-transform:rotate(0deg);}
to {background:yellow;-webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

帰属: ソースはhttp://www.w3schools.com/css/css3_animations.aspからのものです。

于 2013-07-09T14:14:11.387 に答える