7

問題を示すために、このフィドルを作成しました。

http://jsfiddle.net/NfX56/

アニメーションの ROTATION と HOVER は方向を変えるのにうまく機能しているようですが、トランジションのためにアイテムにカーソルを合わせたときの TOGGLE はびくびくしていて、私が望むようなスムーズな方向の反転ではありません。

ブラウザの接頭辞なしの基本的なコードは次のとおりです。

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spin {
    animation: spin 3.5s linear 0s infinite normal;
    width: 100px;
    height: 100px;
    border-radius: 50px 50px 50px 50px;
    overflow: hidden;
    margin-left: -50px;
    margin-top: -50px;
    top: 50%;
    left: 50%;
    position: absolute;
}
.spin:hover {
    animation: spin 3.5s linear 0s infinite reverse;
}

私は次のことを試してみました：

transition-property: transform;
transition-duration: 0s;
transition-timing-function: ease-in-out;

シンボルがスムーズに方向を反転するようにアニメーションを滑らかにしようとしていますが、私はそれを正しく理解できないようです...どんな助けも素晴らしいでしょう!

http://jsfiddle.net/NfX56/

4

2 に答える 2

16

あなたのリクエストを解決するには、よく考える必要がありました。しかし、私は最終的に解決策を見つけました

デモ

関連する CSS コード:

.spin {
    animation: spin 2s linear 0s infinite reverse;
    -moz-animation: 2s linear 0s reverse none infinite spin;
    -webkit-animation: spin 2s linear 0s infinite reverse;
    -0-animation: spin 2s linear 0s infinite reverse;
    -webkit-animation-play-state: paused;
    -o-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
.spin:hover {
    -webkit-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    -webkit-animation-play-state: running;
}
.yin-yang {
    animation: spin 4s linear 0s infinite normal;
    -moz-animation: 4s linear 0s normal none infinite spin;
    -webkit-animation: spin 4s linear 0s infinite normal;
    -0-animation: spin 4s linear 0s infinite normal;
}

トリック: 既に 2 つの要素 (スピンと陰陽) があるので、そのうちの 1 つを一方向に回転するように設定し、もう 1 つを逆方向に回転するように設定し、より高速に回転させます。両方が実行されている場合、正味の効果は一方向に回転することです。1 つだけが回転している場合、正味の効果は逆になります。

あとは、高速回転を一時停止して再開するだけです (設定をリセットするのではなく!)。

上記で 1 つの間違いが検出されました。

.spin:hover {
    -webkit-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}

修正されたデモ

HTMLに余分な要素を追加することで、回転の変化をスムーズにすることができました。

スムーズな移行デモ

追加の CSS は次のとおりです。

.acc {
    transition: all 4s ease-out;
}
.spin:hover .acc {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
于 2013-08-02T20:55:33.960 に答える