web-dev-qa-db-ja.com

CSS3アニメーションを一度だけ実行する（ページの読み込み時）

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

csscss3css-animations
45
buschtoens

数時間のグーグルの後：いいえ、JavaScriptなしでは不可能です。 animation-iteration-count: 1;はanimation shothand属性に内部的に保存され、:hoverで再設定および上書きを取得します。 <a>をブラーし、:hoverをリリースすると、古いクラスreappliesであり、したがってresetsanimation属性です。

悲しいことに、要素の状態間で特定の属性の状態を保存する方法はありません。

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

27
buschtoens

あなたがAでアニメーションを再生したいことを正しく理解している場合は、youuを追加する必要があります

animation-iteration-count: 1

aのスタイルに。

23
Strelok

それは少しの余分なオーバーヘッドで行うことができます。

リンクを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;
}
19
Butsuri

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;
}
18
Ricardus

"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>
0
happyjjd

上記のクエリでは、以下のCSSを適用します

animation-iteration-count: 1
0
Nagnath Mungade