CSS анимация с задержкой для каждого дочернего элемента - PullRequest
Новая
       32

CSS анимация с задержкой для каждого дочернего элемента

54 голосов
/ 28 ноября 2011

Я пытаюсь создать каскадный эффект, применяя анимацию к каждому дочернему элементу. Мне было интересно, есть ли лучший способ сделать это, чем это: 

.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;
}

и так далее ... В общем, я бы хотел, чтобы анимация начиналась для каждого ребенка, но с задержкой. Спасибо за любой вклад!

Дополнение: Может быть, я не правильно объяснил, что меня беспокоило: речь идет о том, как это сделать, независимо от того, сколько у меня детей. Как это сделать, не записывая свойства для каждого ребенка ... например, когда я не знаю, сколько будет детей.

Ответы [ 6 ]

46 голосов
/ 28 ноября 2011

Требуется свойство задержка анимации . 

@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>

Препроцессор CSS, такой как Less.js или Sass , может уменьшить количество повторений, но если выЕсли вы работаете с неизвестным количеством дочерних элементов или вам нужно анимировать большое количество, тогда JavaScript будет лучшим вариантом.

32 голосов
/ 05 марта 2018

Вот способ scss сделать это, используя цикл for. 

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}
18 голосов
/ 07 января 2014

В [возможно, ближайшее] будущее, когда 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));
}

Это создаст эффект, при котором каждый элемент списка анимируется в случайном порядке.

17 голосов
/ 28 февраля 2017

Вы также можете использовать свойство transition-delay в CSS и использовать JS или JQuery, чтобы назначить разные задержки для каждого дочернего элемента.(Предположим, что s - начальная задержка в секундах) 

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

Итак, дочерние элементы будут иметь задержки перехода, такие как 1 * s, 2 * s, 3 * s ..... и так далее.Теперь для создания реального эффекта анимации просто установите необходимый переход, и дети будут анимированы в последовательности.Работает как шарм!

8 голосов
/ 11 декабря 2012

Если у вас много элементов (например: у меня есть разбитая на страницы таблица с> 1000 элементов и вы хотите, чтобы каждая строка анимировалась с задержкой при загрузке страницы), вы можете использовать jQuery, чтобы решить эту проблему и избежать роста файла CSS вразмер.Задержка анимации динамически увеличивается. 

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

});​

РЕДАКТИРОВАТЬ: Вот тот же код, который я настроил для использования с 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 - задержка для каждого элемента на странице, которая будет анимирована.

0 голосов
/ 28 ноября 2011

Как это: 

.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...]
...