2つの異なるCSSアニメーションを切り替える方法

私はCSSで自分のサイトのナビゲーションをアニメーション化しています。2つの異なるCSSアニメーションを切り替える方法

// Html file 

     <html> 

     <div class="class-one"> 
     // some value 
     </div> 

     </html> 

    // Css file 

     .class-one { 
     width: 100px 
     height: 100px 
     animation: first-animation paused 7s; 
     animation: second-animation paused 7s; 
     }

各アニメーションがjQueryで再生されるときの動作を制御しています。これに似ています。

// Javascript file 

$(".class-one").click(function() { 

    $(".class-one").css("animation-play-state", "running"); 

    });

私の問題は、再生したいアニメーションを指定できないということです。これは、最初のアニメーションではなく2番目のアニメーションを再生するだけです。再生したいアニメーションをどのように指定できますか？

ありがとうございます！

出典

2017-06-16 Mike Greathouse

あなたは、単一のアニメーションの中に両方のアニメーションを組み合わせたいですか、またはあなたはお互いの後にそれらを実行したいですか？後者の場合は、アニメーションのキーフレームを結合するだけです。 CSSでは最後のプロパティが前のプロパティをオーバーライドするので、2番目のアニメーションだけが再生されていることを覚えておいてください。 – Terry

@Terryさまざまな状況に応じて各アニメーションを再生したいです。たとえば、ページの要素1が100ピクセルを超える場合、アニメーション1を再生し、アニメーション2を再生します。 –

どのようにアニメーションを指定しますか？ユーザインタラクションによって？クラスを切り替えることで？それで私はあなたの質問を理解できません。 – Terry

CSSでは、2番目のアニメーションプロパティ宣言が最初のものを上書きしています。あなたが見たいアニメーションのためにあなたの要素にクラスを設定することができ、

// HTML 
<body> 
    <div class="element-in-question"></div> 
</body> 


// CSS 
.class-one { 
    width: 100px; 
    height: 100px; 
    animation: first-animation paused 7s; 
} 

.class-two { 
    width: 100px; 
    height: 100px; 
    animation: second-animation paused 7s; 
}

はその後のjQueryを使用して：あなたは2つのクラスを必要とする

// jQuery  
if (condition) { 

    // to set first-animation 
    $('.element-in-question').addClass('class-one').removeClass('class-two'); 

} else if (otherCondition) { 

    // to set second-animation 
    $('.element-in-question').addClass('class-two').removeClass('class-one'); 
} 

// trigger with your existing code 
$('.element-in-question').css('animation-play-state', 'running');

出典

2017-06-16 19:17:07 McHat

ありがとうございました！これは私の問題を解決するのに役立った！ –

Glad to help :)ちょっと覚えておいてください。CSSでは、プロパティを複数回宣言すると（あなたのアニメーションプロパティでは）最後の宣言だけが適用されます。 2番目の値が設定されると、そのプロパティの最初の値が消去されます。このため、単一のクラス定義でプロパティを複数回宣言することは決して良い考えではありません。 – McHat

2つの異なるCSSアニメーションを切り替える方法

答えて

関連する問題