8

次のCSSアニメーションがあります。

.border-strobe {
     -webkit-animation: border-strobe-animation 1.5s infinite ease-in-out;
}

@-webkit-keyframes border-strobe-animation {
    0% {border:2px solid #FF1d38;}
    50% {border:2px solid #000000;}
    100% {border:2px solid #FF1d38;}
}

基本的に、私がやりたいことは次のとおりです。

• たとえば、ホバー (so .border-strobe:hover) で、境界線の色を に変更したい#FF1D38。

• ホバーから離れたら、通常のコースでアニメーションを実行させたいだけです。

ただし、問題は、クラスのあるページにいくつかの要素があり、.border-strobeそれらを時間内に保持したいということです。

ホバーを使用して境界線の色をオーバーライドし、アニメーションの一貫性を維持する簡単な方法はありますか、または現在これを行うことはできませんか?

それは理にかなっていますか？

4

1 に答える 1

7

アニメーションを通常のコースで実行し続けたい理由はありますか?

必要なホバーの色がアニメーションの開始と終了と同じである場合、ホバー クラスで境界線の色を定義しながら、ホバー時にアニメーションを強制終了してみませんか?

これが私が得ることができる最も近いものです: http://jsfiddle.net/xsjJy/

アップデート

今まで考えもしなかったなんて信じられない！HTML を変更したい場合は、マスク スパン (または div など、必要なもの) を挿入して、ボーダー ストロボにカーソルを合わせたときに境界線を変更するだけです。

jsFiddle の更新は次のとおりです: http://jsfiddle.net/xsjJy/2/

于 2012-05-04T18:18:08.140 に答える