3

アニメーションをアニメーションの途中で停止させて、デフォルトの状態に正常に戻そうとすると、小さな問題が発生します。親要素の疑似クラスを使用して子要素にアニメーションを適用していますが、要素に:hoverカーソルを合わせるのをやめると、アニメーションがデフォルトの状態に正常に戻るようにしたいと考えています。ここで疑似クラスを使用するべきではないと感じており、:hover別のアプローチ方法がありますが、それをオフに遷移させる方法がわかりません。アニメーションが取り除かれているため、これはもちろん理にかなっていますが、それは望ましい効果ではありません。これは現在の HTML です:

<div id="el1">
    <div class="child"></div>
</div>

そして現在のCSS

#el1 {
    margin-top: 100px;
    position: relative;
    background: transparent url(./image.png) no-repeat;
    height: 100px;
    width: 100px;
}

#el1 .child {
    height: 100%;
    width: 100%;
    background-color: white;
    opacity: 0;
}

#el1:hover .child {
    -webkit-animation-name: semiopacity;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes semiopacity {
    from { opacity: 0; }
    to { opacity: 0.4; }
}

要約すると、ホバリングすると、画像の上に白い点滅効果があります。「オフ」にスナップするのではなく、ホバリングを停止したときに、アニメーションを元のキーフレームに戻したいです。HTML または CSS のいずれかを変更できます。それを機能させる方法に制限はありません。

4

1 に答える 1

2

:hover; の css3 アニメーション アニメーション全体を強制する

数日前に同様の質問がありました。この人はまた、ホバーが削除された後にアニメーション全体を表示したいと考えていました。見てみな。

于 2011-10-09T18:12:25.090 に答える