私はCSS3によって駆動される単純なランディングページを作成しています。見た目を良くするために、<a>
準備中:
@keyframes splash {
from {
opacity: 0;
transform: scale(0, 0);
}
50% {
opacity: 1;
transform: scale(1.1, 1.1);
}
to {
transform: scale(1, 1);
}
}
さらに素晴らしいものにするために、ホバーアニメーションを追加しました。
@keyframes hover {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.1, 1.1);
}
}
しかし、問題があります!私はこのようなアニメーションを割り当てました:
a {
/* Some basic styling here */
animation: splash 1s normal forwards ease-in-out;
}
a:hover {
animation: hover 1s infinite alternate ease-in-out;
}
すべて正常に動作します:<a>
はユーザーの顔に跳ね返り、ホバリングするとニースの振動が発生します。ユーザーが<a>
滑らかなものは突然終了し、<a>
は、splash
-アニメーションを繰り返します。 (私にとっては理にかなっていますが、したくありません)JavaScript Class Jiggery Pokerなしでこの問題を解決する方法はありますか?
数時間のグーグルの後:いいえ、JavaScriptなしでは不可能です。 animation-iteration-count: 1;
はanimation
shothand属性に内部的に保存され、:hover
で再設定および上書きを取得します。 <a>
をブラーし、:hover
をリリースすると、古いクラスreappliesであり、したがってresetsanimation
属性です。
悲しいことに、要素の状態間で特定の属性の状態を保存する方法はありません。
JavaScriptを使用する必要があります。
あなたがA
でアニメーションを再生したいことを正しく理解している場合は、youuを追加する必要があります
animation-iteration-count: 1
a
のスタイルに。
それは少しの余分なオーバーヘッドで行うことができます。
リンクをdivでラップし、アニメーションを分離するだけです。
html ..
<div class="animateOnce">
<a class="animateOnHover">me!</a>
</div>
..とcss ..
.animateOnce {
animation: splash 1s normal forwards ease-in-out;
}
.animateOnHover:hover {
animation: hover 1s infinite alternate ease-in-out;
}
FirefoxとChromeでこれが機能するようになりました。必要に応じて、以下のクラスを追加/削除するだけです。
.animateOnce {
-webkit-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
-moz-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
-o-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
}
"iteration-count: 1"
なしの次のコードは、入力後、最後のアイテムがロードされるまで、「パルスは使用されていませんでしたが」.
<li class="animated slideInLeft delay-1s animation-iteration-count: 1"><i class="fa fa-credit-card" aria-hidden="true"></i> 1111</li>
<li class="animated slideInRight delay-1-5s animation-iteration-count: 1"><i class="fa fa-university" aria-hidden="true"></i> 222222</li>
<li class="animated lightSpeedIn delay-2s animation-iteration-count: 1"><i class="fa fa-industry" aria-hidden="true"></i> aaaaaa</li>
<li class="animated slideInLeft delay-2-5s animation-iteration-count: 1"><i class="fa fa-key" aria-hidden="true"></i> bbbbb</li>
<li class="animated slideInRight delay-3s animation-iteration-count: 1"><i class="fa fa-thumbs-up" aria-hidden="true"></i> ccccc</li>
上記のクエリでは、以下のCSSを適用します
animation-iteration-count: 1