4

私はこれらのスタイルを持つ画像を持っています：

<img src="images/head-tails.gif" class="graphs" />

.graphs {
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
    /* -webkit-animation:animated 5s infinite; */
    /* -moz-animation:animated 5s infinite; */
    /* -o-animation:animated 5s infinite; */
    /* animation:animated 5s infinite; */
}
.graphs:hover {
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

したがって、画像にカーソルを合わせると、コインのように360度回転します。ただし、ページが読み込まれると、画像はマウスにカーソルを合わせる必要なしに、このアニメーション（回転）を無限に実行します。どうすればこれを機能させることができますか？

4

2 に答える 2

1

これには、キーフレームアニメーションを使用できます。このように書いてください：

.graphs {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:2s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-name:orbit;
    -moz-animation-duration:2s;
}
@-webkit-keyframes orbit { 
from { -webkit-transform:rotateY(0deg) } 
to { -webkit-transform:rotateY(360deg) } 
}
@-moz-keyframes orbit { 
from { -moz-transform:rotateY(0deg) } 
to { -moz-transform:rotateY(360deg) } 
}

これをチェックしてくださいhttp://jsfiddle.net/ktPev/1/

于 2013-01-15T10:15:45.237 に答える
0

代わりにキーフレームアニメーションを使用してください。コメントされたコードのコメントを解除し、をに変更animation-timing-functionしlinearます。このようにanimation: animated 5s linear infinite;。次に、たとえば次のようにキーフレームアニメーションを定義します（この例では-webkit-を使用しました）。

@-webkit-keyframes animated {
        to { -webkit-transform: rotateY(360deg); }
}

そしてそれはうまくいくはずです！

これがデモです

于 2013-01-15T10:19:49.097 に答える