5

フィドルで見つけたこのCSSコードを使用して、ホイールを回転させています。

http://jsfiddle.net/gaby/9Ryvs/7/

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

基本的には、1800 Degress に達した直後に回転を停止し、0 に戻って後で再び回転できるようにしたいと考えています。

それは可能ですか？

4

1 に答える 1

1

animation-iteration-count適切に設定するだけです。

1800 度 = 5 回転 (5 * 360)

-webkit-animation-iteration-count:5;
-moz-animation-iteration-count:5;
-ms-animation-iteration-count:5;
-o-animation-iteration-count:5;
animation-iteration-count:5;

完了すると、自動的に 0 にリセットされます。

このドキュメントは、より多くのコンテキストを提供する可能性があります。

編集

jsFiddle を更新しました。-o-animation補足として、Opera v12 がある場合に備えて、そこにアイテムを含めることも検討する必要があります。また、省略形も検討してください。

-webkit-animation:spin 4000ms linear 0s 5;
-moz-animation:spin 4000ms linear 0s 5;
-ms-animation:spin 4000ms linear 0s 5;
-o-animation:spin 4000ms linear 0s 5;
animation:spin 4000ms linear 0s 5;
于 2013-06-11T20:53:06.697 に答える