Question

我已经成功制作了动画横幅，但我需要从头开始重复整个动画无限次。但动画迭代计数无限对我不起作用，因为我有所有我的孩子元素的单独动画（3只鸟，2文本）。任何人都可以帮助我，我怎样才能一次又一次地重复整个动画？

HTML

<html>
 <head>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div class="canvas">
  <h2 class="bye">Good Bye</h2>
  <div class="canvas-inner">
   <div class="text">Welcome</div>
    <img class="people" src="https://i.imgsafe.org/9967e45cc8.png" alt="">
    <img class="bird-1" src="https://i.imgsafe.org/996ac926a0.png" alt="">
    <img class="bird-2" src="https://i.imgsafe.org/996bc03236.png" alt="">
    <img class="bird-3" src="https://i.imgsafe.org/996cfb24a4.png" alt="">
   </div>
  </div>
 </body>
</html>

CSS

body{
margin: 0;
}
.canvas{
background-color: lightgrey;
width: 300px;
height: 250px;
position: relative;
left: 30%;
top: 20%;
overflow: hidden;
}
.canvas-inner{
  opacity:1;
  animation-name: final;
  animation-duration: 6s; 
  animation-timing-function: linear; 
  animation-delay: 3s; 
  animation-fill-mode: forwards;
 }
 .bye{
  position: absolute;
  left:0;
  right:0;
  margin:0 auto;
  width:120px;
  top: -50px;
  -webkit-animation: bye 2s 6s linear forwards;
 }
 .logo,
 .people{
  position: absolute;
  }
  .text{
   position: absolute;
   right: -100px;
   top: 50px;
   -webkit-animation: text 2s 2s linear forwards;
   }
  .bird-1{
   position: absolute;
   width: 50px;
   -webkit-animation: first 2s linear forwards;
   animation: first 2s linear forwards;
   top: -70px;
   left: 55px;
   }
  .bird-2{
   position: absolute;
   width: 50px;
   -webkit-animation: second 2s linear forwards;
   animation: second 2s linear forwards;
   top: 165px;
   left: -50px;
   }
   .bird-3{
   position: absolute;
   width: 50px;
   -webkit-animation: third 2s linear forwards;
   animation: third 2s linear forwards;
   top: 163px;
   right: -50px;
   transform: rotateY(180deg);
   }
   @-webkit-keyframes first{
   0%{top: -70px;}
   100%{top:65px;}
   }
   @-webkit-keyframes second{
   0%{left: -50px;}
   100%{left:15px;}
   }
   @-webkit-keyframes third{
   0%{right: -50px;}
   100%{right:135px;}
   }
   @-webkit-keyframes text{
   0%{right:-100px;}
   100%{right:50px;}
   }
   @-webkit-keyframes bye{
   0%{top:-50px;}
   100%{top:110px;}
   }
   @-webkit-keyframes final{
    0%{opacity:1;}
    100%{opacity:0;}
  }

如何再次重复整个嵌套的CSS动画

0 个答案: