각 하위 요소에 대한 지연이있는 CSS 애니메이션

각 하위 요소에 대한 지연이있는 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;
}

등등 ... 그래서 기본적으로 각 어린이에 대해 애니메이션이 시작되지만 지연이 발생하고 싶습니다. 입력 해 주셔서 감사합니다!

추가 : 어쩌면 내 관심사가 무엇인지 제대로 설명하지 않았을 수도 있습니다. 얼마나 많은 자녀가 있더라도 어떻게해야하는지에 관한 것입니다. 모든 어린이의 속성을 적지 않고이를 수행하는 방법 ... 예를 들어 몇 명의 어린이가 있을지 모를 때.

---

원하는 것은 애니메이션 지연 속성입니다.

@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가 가장 좋은 옵션입니다.

---

다음은 for 루프를 사용하여이를 수행하는 scss 방법입니다.

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

---

때 [희망 가까운] 미래에 attr와 calc있다 완벽하게 지원, 우리는이 자바 스크립트없이 달성 할 수 있습니다.

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

이것은 각 목록 항목이 임의의 순서로 나타나는 효과를 생성합니다.

---

CSS의 transition-delay 속성을 사용하고 JS 또는 JQuery를 사용하여 각 하위 요소에 대해 다른 지연을 할당 할 수도 있습니다. (s가 초 단위의 시작 지연이라고 가정)

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

So, the children will have the transition delays like 1*s, 2*s, 3*s ..... and so on. Now to create the actual animation effect simply set the required transition and the children will be animated in a sequence. Works like a charm !

---

If you have a lot of items (for example: I have paginated table with >1000 items and wanna each row to be animated with delay when page is loads), you can use jQuery to solve this and avoid css file rising in size. Animation delay dynamically increases.

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

});​

EDIT: Here is the same code I adjusted to use with animate.css (install additional plugin before use https://gist.github.com/1438179 )

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

});

Where "fadeIn" is animation type, "400" - animation execute time, 500 - delay for each element on page to be animated.

---

Like this:

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

ReferenceURL : https://stackoverflow.com/questions/8294400/css-animations-with-delay-for-each-child-element