web-dev-qa-db-ja.com

各子要素の遅延を伴うCSSアニメーション

各子要素にアニメーションを適用して、カスケード効果を作成しようとしています。これよりも良い方法があるかどうか疑問に思っていました：

.myClass img:nth-child(1){
    -webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(2){
    -webkit-animation: myAnimation 0.9s linear 0.1s forwards;
}
.myClass img:nth-child(3){
    -webkit-animation: myAnimation 0.9s linear 0.2s forwards;
}
.myClass img:nth-child(4){
    -webkit-animation: myAnimation 0.9s linear 0.3s forwards;
}
.myClass img:nth-child(5){
    -webkit-animation: myAnimation 0.9s linear 0.4s forwards;
}

など...それで基本的に、私はそれぞれの子供のために開始するが、遅れてアニメーションを持ちたいです。ご意見ありがとうございます！

追加：たぶん、私は私の懸念が何であったかを適切に説明しなかったかもしれません：それは私が何人の子供を持っているかに関係なくこれをどのように行うかについてです。すべての子供のプロパティを書き留めずにこれを行う方法...たとえば、子供が何人になるかわからない場合。

cssanimationcss3delaycss-selectors
55
Seka

必要なのは animation delay プロパティです。

@keyframes FadeIn { 
  0% {
    opacity: 0;
    transform: scale(.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.myClass img {
  float: left;
  margin: 20px;
  animation: FadeIn 1s linear;
  animation-fill-mode: both;
}

.myClass img:nth-child(1) { animation-delay: .5s }
.myClass img:nth-child(2) { animation-delay: 1s }
.myClass img:nth-child(3) { animation-delay: 1.5s }
.myClass img:nth-child(4) { animation-delay: 2s }
<div class="myClass">
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
</div>

Less.js や Sass などのCSSプリプロセッサを使用すると、繰り返しの量を減らすことができますが、子要素の数が不明な場合や大きなアニメーションを作成する必要がある場合はJavaScriptが最適なオプションになります。

51
CherryFlavourPez

Forループを使用してそれを行うscssの方法を次に示します。

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}
34
robshearing

[できれば近い将来] attrとcalcが完全をサポートする場合、JavaScriptなしでこれを実現できます。

HTML：

<ul class="something">
    <li data-animation-offset="1.0">asdf</li>
    <li data-animation-offset="1.3">asdf</li>
    <li data-animation-offset="1.1">asdf</li>
    <li data-animation-offset="1.2">asdf</li>
</ul>

CSS：

.something > li
{
    animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}

これにより、各リストアイテムがランダムな順序で表示されるエフェクトが作成されます。

18
Steven Vachon

CSSのtransition-delayプロパティを利用し、JSまたはJQueryを使用して、各子要素に異なる遅延を割り当てることもできます。 （sを秒単位の開始遅延と仮定します）

$(".myClass img").each(function(index){
     $(this).css({
          'transition-delay' : s*(1+index) + 's'
     });
 });

したがって、子には1 * s、2 * s、3 * sなどの遷移遅延があります。実際のアニメーション効果を作成するには、必要なトランジションを設定するだけで、子がシーケンスでアニメーション化されます。チャームのように動作します！

17
Adk96r

多数のアイテムがある場合（たとえば、1000を超えるアイテムでページ分割されたページがあり、ページの読み込み時に各行が遅延してアニメーション化されるようにしたい場合）、jQueryを使用してこれを解決し、cssファイルのサイズが大きくなるのを防ぐことができます。アニメーションの遅延は動的に増加します。

$.each($('.myClass'), function(i, el){
    $(el).css({'opacity':0});
    setTimeout(function(){
       $(el).animate({
        'opacity':1.0
       }, 450);
    },500 + ( i * 500 ));

});​

EDIT：ここに、animate.cssで使用するために調整した同じコードがあります（使用する前に追加のプラグインをインストールします https：//Gist.github .com/1438179 ）

$.each($(".myClass"), function(i, el){
    $(el).css("opacity","0");
    setTimeout(function(){
       $(el).animateCSS("fadeIn","400");
    },500 + ( i * 500 ));

});

「fadeIn」はアニメーションタイプ、「400」-アニメーション実行時間、500-ページ上の各要素がアニメーション化されるまでの遅延。

8
Neolo

このような：

.myClass img {
    -webkit-animation: myAnimation 0.9s linear forwards;
}

.myClass img:nth-child(1){
    -webkit-animation-delay: 0.1s;
}

.myClass img:nth-child(2){
    -webkit-animation-delay: 0.2s;
}

[...etc...]
0
peduarte