1

が付いたCSS3rotate transformがありcubic-bezier transition-timing-function、マウスオーバーで正常に動作していますが、mouseleaveアニメーションを無効にしたいです。簡単なjsFiddleを用意しました。

img {
    transition : all 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}

img:hover {
    transform: rotate(360deg);
}
4

1 に答える 1

1

ホバーオフしたときに元に戻らないようにするということですか？そのために「無限」（実際には非常に大きい） （略記transition-delayでは2回目の値）を使用できます。

このような：

デモ

CSS：

img {
    transition: 0s 99999s; /* transition when mouse leaves */
}
img:hover {
    transform: rotate(360deg);

    /* transition on mouseover */
    transition: 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}

これにより、最初のホバーでのみ画像が回転することに注意してください。

ホバーごとに回転させる場合は、キーフレームアニメーションを使用する必要があります。このような：

デモ

CSS（プレフィックスなし、追加する必要があります）：

img:hover {
    animation: rot 1s cubic-bezier(0.680,-0.550,0.265,1.550);
}
@keyframes rot {
    to {
        transform: rotate(360deg);
    }
}

また、接頭辞なしのプロパティを最初に記述していることに気付きました。常に最後に配置する必要があります。特に今、IE、Firefox、Operaの今後のバージョンが接頭辞なしのトランジションである場合。

于 2012-09-29T19:05:11.713 に答える