Question

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

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

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

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

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

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

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

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

<头>

进度\元素	`.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>

Css动画 - 动画延迟

2 个答案: