CSS无限波纹动画

Question

我想做无限的波纹动画,但它会变得不自然..

我不喜欢这种突然的变化,我想让动画永远持续下去.我该怎么做？

在代码片段中,由于某种原因我无法很好地显示它,因此当前情况在JSFiddle中.

body {font-size: 62.5%; background-color: #000;}

.ripple {
  margin: auto;
  margin-top: 10rem;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  animation: ripple 2s linear infinite;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2),
                0 0 0 1.5rem rgba(255,255,255, 0.2),
                0 0 0 5rem rgba(255,255,255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1.5rem rgba(255,255,255, 0.2),
                0 0 0 4rem rgba(255,255,255, 0.2),
                0 0 0 8rem rgba(255,255,255, 0);
  }
}

<div class="ripple" style="animation-delay: 0s"></div>

顺便说一句,我也尝试了这个(▼)与HTML,但圆圈重叠,我做不好.. :(

<div class="ripple" style="animation-delay: 0s"></div>
<div class="ripple" style="animation-delay: 1s"></div>
<div class="ripple" style="animation-delay: 2s"></div>

Answer 1

这是另一个更容易获得平滑效果的想法。您可以保持阴影动画简单，并考虑伪元素具有相同的延迟动画。诀窍是正确选择延迟/持续时间。

我将持续时间设为3s（3 个元素），并且1s每个元素之间都有延迟。

body {background-color: #000;}

.ripple {
  margin: auto;
  margin-top: 5rem;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  position:relative;
  animation: ripple 3s linear infinite;
}
.ripple::before,
.ripple::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 50%;
  animation:inherit;
  animation-delay:1s;
}
.ripple::after {
  animation-delay:2s;
}
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 8rem rgba(255,255,255, 0);
  }
}

<div class="ripple"></div>

Answer 2

如果您希望动画更加流畅,则需要将起始值与结束值相匹配,这样就不会产生"跳跃"效果.

像这样的东西:

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0rem rgba($ripple-color, 0.2),
                0 0 0 1rem rgba($ripple-color, 0.2),
                0 0 0 2rem rgba($ripple-color, 0.2),
                0 0 0 5rem rgba($ripple-color, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1rem rgba($ripple-color, 0.2),
                0 0 0 2rem rgba($ripple-color, 0.2),
                0 0 0 5rem rgba($ripple-color, 0.2),
                0 0 0 8rem rgba($ripple-color, 0);
  }
}