アニメーションをアニメーションの途中で停止させて、デフォルトの状態に正常に戻そうとすると、小さな問題が発生します。親要素の疑似クラスを使用して子要素にアニメーションを適用していますが、要素に: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 のいずれかを変更できます。それを機能させる方法に制限はありません。