4

ここで説明されているように、アニメーションの一時停止を実装しました: JavaScript を使用して CSS3 アニメーションを一時停止および再開する方法は?

回転要素の CSS は次のとおりです。

.is-rotating{
    -webkit-animation: circle 55s linear infinite;
    -moz-animation: circle 55s linear infinite;
    -ms-animation: circle 55s linear infinite;
    animation: circle 55s linear infinite;
}

is-pausedクラスを問題の要素に切り替えますonmouseover。

.is-paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

このクラスを JS (onmouseout) で削除すると、回転アニメーションが「原点」にリセットされます。あるときもあれば、そうでないときもあります。これは Webkit (OSX 上の Chrome および Safari) で発生し、FF では正常に動作します。

animation-play-state実験的な機能であることは知っていますが、 MDN は webkit で正常に動作するはずだと言っています。Webkit ブラウザーに実装する方法について何か考えがある人はいますか?

更新: CSS の残りの部分は次のとおりです。

@-webkit-keyframes circle {
    from { -webkit-transform:rotate(0deg); }
    to { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes inner-circle {
    from { -webkit-transform:rotate(0deg); }
    to { -webkit-transform:rotate(-360deg); }
}

@-moz-keyframes circle {
    from { -moz-transform:rotate(0deg); }
    to { -moz-transform:rotate(360deg); }
}
@-moz-keyframes inner-circle {
    from { -moz-transform:rotate(0deg); }
    to { -moz-transform:rotate(-360deg); }
}

@-ms-keyframes circle {
    from { -ms-transform:rotate(0deg); }
    to { -ms-transform:rotate(360deg); }
}
@-ms-keyframes inner-circle {
    from { -ms-transform:rotate(0deg); }
    to { -ms-transform:rotate(-360deg); }
}

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}
4

3 に答える 3

1

CSS を使用して :hover に基づいて 2 つの方向に 3D カルーセル製品カタログをアニメーション化するのと同じように、私は同じようにびくびくしていました。

animation-fill-mode:forwards などの明白なアイデアをいじり、幸運にも最終的に解決したのは、2 つのビットのトランジション構文をわずかな期間と変換自体をプロパティとして混在させることでした。トランスフォームの状態をキャッチするためのトランジション チェイスの過程で、トランスフォームされる要素への更新はそのまま残り、効果は仕様に適合しているように見えるため、有効なソリューションである必要があります。

transition-duration: 0.2s;transition-property:transform;
于 2013-09-25T18:50:16.410 に答える