Css Animation——动画延迟

Question

Update - The pen below has been updated to show the end results.

我正在尝试使用 css 动画模仿信号动画，但我似乎无法理解动画延迟的概念。如果你看这里

http://codepen.io/anon/pen/YwZOmK?editors=110

.real-time-animation {
  margin-top: 20px;
  position: relative;
  transform: scale(0.5) rotate(45deg);
  transform-origin: 5% 0%;
}

.real-time-animation>div {
  animation: sk-bouncedelay 3s infinite forwards;
}

.circle1 {
  animation-delay: 2s;
}

.circle2 {
  animation-delay: 1s;
}

@keyframes sk-bouncedelay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.circle {
  position: relative;
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: transparent;
  border: 20px solid transparent;
  border-top-color: darkblue;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.circle2 {
  top: 40px;
  width: 12em;
  height: 12em;
  left: 33px;
}

.circle3 {
  top: 80px;
  width: 8em;
  height: 8em;
  left: 66px;
}

<div class="real-time-animation">
  <div class="circle circle1"> </div>
  <div class="circle circle2"> </div>
  <div class="circle circle3"> </div>
</div>

你应该能够理解我想要完成的事情。我想从什么都不显示开始，然后在 1 秒后显示第一个栏，然后在 1 秒后显示第二个栏，最后再过 1 秒后显示第三个栏。

Answer 1

我的解决方案:

http://codepen.io/anon/pen/JGWmJg?editors=110

.real-time-animation{
  margin-top: 20px;
  position: relative;
  transform: scale(0.5) rotate(45deg);
  transform-origin: 5% 0%;
}

.circle1, .circle2, .circle3{
  animation: 4s infinite ease-in;
  animation-delay: 1s;
}

.circle1{
  animation-name: circle1;
}

.circle2{
  animation-name: circle2;
}
.circle3{
  animation-name: circle3;
}

@keyframes circle1 {
  0%{ 
   opacity: 0;
  }
  
  25%{
    opacity: 0;
  }
  
  50%{
    opacity: 0;
  }
  75%{
    opacity: 1;
  }
  
  100% { 
    opacity: 0;
  }
}

@keyframes circle2 {
  0%{ 
   opacity: 0;
  }
  
  25%{
    opacity: 0;
  }
  
  50%{
    opacity: 1;
  }
  75% { 
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

@keyframes circle3 {
  0%{ 
   opacity: 0;
  }
  
  25%{
    opacity: 1;
  }
  
  50%{
    opacity: 1;
  }
  75% { 
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.circle {
    position: relative;
    width: 16em; height: 16em;
    border-radius: 50%;
    background: transparent;
    border: 20px solid transparent;
    border-top-color: darkblue;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.circle2{
    top: 40px;
    width: 12em;
    height: 12em;
    left: 33px;
}

.circle3{
    top: 80px;
    width: 8em;
    height: 8em;
    left: 66px;
}

你可以改变动画持续时间的速度:“动画:4s infinite ease-in;”