一个动画中的不同元素

时间:2017-08-03 14:37:02

标签: css3 animation

他们有点并发症,但我认为只用CSS3就不可能做我想要的事情。

我在标题中有三个图像,我希望通过在CSS动画中使用opacity来显示带有 let SubmitButton = LOTAnimationView(name: "submit_195_33") self.SubmitViewName.addSubview(SubmitButton) SubmitButton.frame = CGRect(x: 0, y: 0, width: 195, height: 33) SubmitButton.contentMode = .scaleAspectFill SubmitButton.play() 效果的图像。

我在想如果我可以在动画中选择嵌套元素并为它们制作动画。创建链动画有点困难。

2 个答案:

答案 0 :(得分:2)

尝试使用transition-delay属性来延迟动画。

答案 1 :(得分:0)

只需将动画规则应用于图像即可。使用animation-delay可以产生chain效果。



* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  background-color: #000;
}
img {
  margin: auto;
  width: 33.333%;
  opacity: 0;
  animation-name: fade;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes fade {
  50% {
    opacity: 1;
  }
}
img:nth-child( 2 ) {
  animation-delay: 0.5s;
}
img:nth-child( 3 ) {
  animation-delay: 1s;
}

<img src="http://i.imgur.com/iyzGnF9.jpg">

<img src="http://i.imgur.com/iyzGnF9.jpg">

<img src="http://i.imgur.com/iyzGnF9.jpg">
&#13;
&#13;
&#13;