67

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 Pokery なしでこの問題を解決する方法はありますか?

4

8 に答える 8

40

何時間もグーグル検索した後: いいえ、JavaScript なしでは不可能です。はshothand アトリビュートにanimation-iteration-count: 1;内部的に保存され、 でリセットされて上書きされます。をぼかして解放すると、古いクラスが再適用されるため、属性が再びリセットされます。animation:hover<a>:hoveranimation

残念ながら、特定の属性の状態を複数の要素の状態に保存する方法はありません。

JavaScript を使用する必要があります。

于 2012-03-16T18:40:38.687 に答える
34

A追加する必要があるのは一度だけアニメーションを再生したいということを正しく理解している場合

animation-iteration-count: 1

のスタイルにa。

于 2011-12-13T05:17:03.723 に答える
25

これは、少し余分なオーバーヘッドで実行できます。

リンクを 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;
}
于 2013-06-12T02:19:02.177 に答える
23

これを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;
}
于 2014-07-30T07:31:12.683 に答える
-1

次のコードを"iteration-count: 1"使用しないと、'pulse が使用されていない場合でも、入力後、最後の項目が読み込まれるまで、すべての項目がパルス表示されます。

<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>
于 2018-11-28T01:53:15.467 に答える