CSS每个子元素的延迟的动画 [英] CSS Animations with delay for each child element

问题描述

我试图通过对每个子元素应用动画来创建级联效果。我想知道是否有一个更好的方式做到这一点：

  .myClass img：nth-​​child 
 -webkit-animation：myAnimation 0.9s linear forward; 
} 
 .myClass img：nth-​​child（2）{
 -webkit-animation：myAnimation 0.9s linear 0.1s forward; 
} 
 .myClass img：nth-​​child（3）{
 -webkit-animation：myAnimation 0.9s linear 0.2s forward; 
} 
 .myClass img：nth-​​child（4）{
 -webkit-animation：myAnimation 0.9s linear 0.3s forward; 
} 
 .myClass img：nth-​​child（5）{
 -webkit-animation：myAnimation 0.9s linear 0.4s forward; 
} 
  

等等...
喜欢有一个动画开始为每个孩子，但有一个延迟。
感谢任何输入！

添加：也许我没有正确解释我的关注：这是关于如何做这个，无论有多少孩子。如何做到这一点，而不必写下每个孩子的属性...例如，当我不知道有多少孩子会是。

解决方案

您需要的是 animation delay property。

  @keyframes FadeIn {0％{opacity：0; transform：scale（.1）; } 85％{opacity：1;变换：scale（1.05）; } 100％{transform：scale（1）; }}。myClass img {float：left; margin：20px; animation：FadeIn 1s linear; animation-delay：1s} .myClass img：nth-​​child（1）{animation-delay：.5s} .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将是最好的选择。

I am trying to create a cascading effect by applying an animation to each child element. I was wondering if there is a better way to do it than this:

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

and so on... So basically, I'd like to have an animation starting for each child but with a delay. Thanks for any input!

Addition: Maybe I did not properly explain what was my concern: It's about how to do this no matter how many children I have. How to do this without having to write down the properties for every child... for example, when I don't know how many children there are going to be.

解决方案

What you want is the animation delay property.

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

A CSS preprocessor such as Less.js or Sass can reduce the amount of repetition, but if you're working with an unknown number of child elements or need to animate a large number then JavaScript will be the best option.

这篇关于CSS每个子元素的延迟的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！