さまざまなCSSアニメーションを次々に再生するにはどうすればいいですか？

Question

私は別のCSSアニメーションを次々と再生しようとしていますが、どのようにするかわかりません。

基本的には、1つのアニメーションを再生して15秒間画面に表示し、次の1つを再生し、15秒間表示し、次の1つを再生します、それは上から再び始めるべきです。

ここでは、最初に再生する必要があるサンプルを15秒間表示し、次のサンプルに移動して同じことを行います。

<style> #animated-example { 
 
    width: 300px; 
 
    height: 200px; 
 
    border: solid 1px #1A7404; 
 
    position: absolute; 
 
    background-color: #62A80A; 
 
} 
 

 
.animated { 
 
    -webkit-animation-duration: 2s; 
 
    animation-duration: 2s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 

 
@-webkit-keyframes bounceInLeft { 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translateX(-2000px); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translateX(30px); 
 
    } 
 
    80% { 
 
    -webkit-transform: translateX(-10px); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateX(0); 
 
    } 
 
} 
 

 
@keyframes bounceInLeft { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateX(-2000px); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    transform: translateX(30px); 
 
    } 
 
    80% { 
 
    transform: translateX(-10px); 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    } 
 
} 
 

 
.bounceInLeft { 
 
    -webkit-animation-name: bounceInLeft; 
 
    animation-name: bounceInLeft; 
 
} 
 

 
</style>

<img id="animated-example" class="animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">

そして、別のものを実行して、15秒のためにそれを表示し、上に移動します。 http://digitalfio.github.io/Stagger.css/

あなたが欲しい15秒の遅延を取得するタイミングに少し作業する必要があります。私はノアアディことで、この概念を適応させることによって同様のものを達成するために管理している

<style> #animated-example { 
 
    width: 300px; 
 
    height: 200px; 
 
    border: solid 1px #1A7404; 
 
    position: absolute; 
 
    background-color: #62A80A; 
 
} 
 
.animated { 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 
@-webkit-keyframes bounceInDown { 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translateY(-2000px); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(30px); 
 
    } 
 
    80% { 
 
    -webkit-transform: translateY(-10px); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateY(0); 
 
    } 
 
} 
 
@keyframes bounceInDown { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateY(-2000px); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    transform: translateY(30px); 
 
    } 
 
    80% { 
 
    transform: translateY(-10px); 
 
    } 
 
    100% { 
 
    transform: translateY(0); 
 
    } 
 
} 
 
.bounceInDown { 
 
    -webkit-animation-name: bounceInDown; 
 
    animation-name: bounceInDown; 
 
} 
 
</style>

<img id="animated-example" class="animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

Answer 1

しかしそれ以外はかなり簡単なはずです。

Answer 2

animation-delayを除いて、を除いて、最後のアニメーションが完了した後でアニメーションを繰り返すことを望むという事実については、残念ながら、（現在）ループアニメーションの繰り返しの間に遅延を指定する方法はありません。

しかし、次のようなJavaScriptを少し使ってやりたいことを達成することはできます。アニメーションを追加するには、コードの先頭にあるクラス名をanimations配列に追加します。

var animations=["bounceInLeft","bounceInDown"], 
 
    count=animations.length, 
 
    classlist=document.querySelector("img").classList, 
 
    holder=document.createElement("div"), 
 
    style=window.getComputedStyle(holder), 
 
    delay=15, 
 
    current,wait,x; 
 
holder.style.display="none"; 
 
document.body.appendChild(holder); 
 
animate(); 
 
function animate(){ 
 
    wait=0; 
 
    x=0; 
 
    while(x<count){ 
 
     setTimeout(function(a){ 
 
      classlist.remove(current); 
 
      classlist.add(a); 
 
      current=a; 
 
     },wait*1000,animations[x]); 
 
     holder.className=animations[x]; 
 
     wait+=delay+parseInt(style.getPropertyValue("animation-duration")); 
 
     x++; 
 
    } 
 
    setTimeout(animate,wait*1000); 
 
};

img{ 
 
    animation-fill-mode:both; 
 
    height:200px; 
 
    width:300px; 
 
} 
 
.bounceInDown{ 
 
    animation-duration:1s; 
 
    animation-name:bounceInDown; 
 
} 
 
.bounceInLeft{ 
 
    animation-duration:2s; 
 
    animation-name:bounceInLeft; 
 
} 
 
@keyframes bounceInDown{ 
 
    0%{ 
 
     opacity:0; 
 
     transform:translateY(-2000px); 
 
    } 
 
    60%{ 
 
     opacity:1; 
 
     transform:translateY(30px); 
 
    } 
 
    80%{ 
 
     transform:translateY(-10px); 
 
    } 
 
    100%{ 
 
     transform:translateY(0); 
 
    } 
 
} 
 
@keyframes bounceInLeft{ 
 
    0%{ 
 
     opacity:0; 
 
     transform:translateX(-2000px); 
 
    } 
 
    60%{ 
 
     opacity:1; 
 
     transform:translateX(30px); 
 
    } 
 
    80%{ 
 
     transform:translateX(-10px); 
 
    } 
 
    100%{ 
 
     transform:translateX(0); 
 
    } 
 
}

<img src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">

Answer 3

純粋なCSSでそれを達成するための唯一の方法は、同時にすべてのアニメーションを実行し、いくつかの計算を行うことです。

• 各アニメーションの長さがなければなりませんあなたが望むアニメーションの長さと同じで同じであることを意味します（つまり、2つの15秒アニメーションが必要な場合、CSSアニメーションは30秒の長さに設定され、遅延はありません）。
• to co上記の場合、最初のアニメーションが50％で終了し、2番目のアニメーションが開始されることを意味します。また、すべての中間値を補間する必要があります。 2つのアニメーションは簡単ですが、アニメーションの総数が増えるにつれて電卓を使用する必要があります。これは、遅延を考慮しない場合です.5秒後にアニメーションを終了する15秒のアニメーションがあると、数値が変化します（現在は33％に等しくなります）。

---

あなたがここにアクションでそれを見たら、より明確になります。

.animated-example { 
 
    width: 300px; 
 
    height: 200px; 
 
    border: solid 1px #1A7404; 
 
    position: absolute; 
 
    background-color: #62A80A; 
 
} 
 

 
.animated { 
 
    animation-duration: 20s; 
 
    animation-fill-mode: both; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
.bounceInLeft { 
 
    -webkit-animation-name: bounceInLeft; 
 
    animation-name: bounceInLeft; 
 
} 
 

 
.bounceInDown { 
 
    -webkit-animation-name: bounceInDown; 
 
    animation-name: bounceInDown; 
 
} 
 

 

 
@keyframes bounceInLeft { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateX(-2000px); 
 
    } 
 
    6% { 
 
    opacity: 1; 
 
    transform: translateX(30px); 
 
    } 
 
    8% { 
 
    transform: translateX(-10px); 
 
    } 
 
    10% { 
 
    transform: translateX(0); 
 
    } 
 
    40% { 
 
    opacity: 1; 
 
    transform: translateX(0); 
 
    } 
 
    42% { 
 
    opacity: 1; 
 
    transform: translateX(30px); 
 
    } 
 
    55% { 
 
    opacity: 0; 
 
    transform: translateX(-2000px); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: translateX(-2000px); 
 
    } 
 
} 
 

 

 

 
@keyframes bounceInDown { 
 
    0% { 
 
    opacity: 0; 
 
    transform: translateY(-2000px); 
 
    } 
 
    50% { 
 
    opacity: 0; 
 
    transform: translateY(-2000px); 
 
    } 
 
    56% { 
 
    opacity: 1; 
 
    transform: translateY(30px); 
 
    } 
 
    58% { 
 
    transform: translateY(-10px); 
 
    } 
 
    60% { 
 
    transform: translateY(0); 
 
    } 
 
    90% { 
 
    transform: translateY(0); 
 
    } 
 
    92% { 
 
    opacity: 1; 
 
    transform: translateY(30px); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: translateY(-2000px); 
 
    } 
 
}

<img class="animated-example animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png"> 
 
<img class="animated-example animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">