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无限缓入；”

Answer 2

据我了解，您的问题动画不透明度需要是这样的：

Progress \ Element	.circle1	.circle2	.circle3
0%	0	0	0
25%	0	0	1
50%	0	1	1
75%	1	1	1
100%	0	0	0

opacity property is clamped 这意味着如果您设置负值，它将与将其设置为 0 具有相同的效果。对于大于 1 的值也是如此。

使用此属性，我们可以从预定义的 CSS 变量中减去一个常量值并将其用作不透明度。

.real-time-animation {
  zoom: 10;
  width: 8px;
  height: 8px;
  position: relative;
  display: inline-block;
}

.real-time-animation>.circle {
  animation: circle 4s infinite ease-in;
}

.circle1 {
  --circle: 1;
}
.circle2 {
  --circle: 2;
}
.circle3 {
  --circle: 3;
}

@keyframes circle {
  0%, 100% {
   opacity: 0;
  }
  
  25% {
    opacity: calc(var(--circle) - 2);
  }
  
  50% {
    opacity: calc(var(--circle) - 1);
  }
  
  75% {
    opacity: 1;
  }
}

.circle {
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    border-top-color: darkblue;
    position: absolute;
    margin: 0;
    box-sizing: border-box;
    top: 100%;
    left: 0%;
    width: calc(16px - (var(--circle) - 1)*4px);
    height: calc(16px - (var(--circle) - 1)*4px);;
    transform: rotate(45deg) translate(-50%, -50%);
    transform-origin: 0 0;
}

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