css - CSS通过更改不透明度来加载微调器动画

我必须执行一个由5个圆组成的加载微调器，并按时间更改其不透明度。



我是css动画的新手，我正在寻求建议。
我是这样做的：

在课程中添加了5个圈子

<div className="loading-spinner">
  <div className="dot dot1" />
  <div className="dot dot2" />
  <div className="dot dot3" />
  <div className="dot dot4" />
  <div className="dot dot5" />
</div>

这些是微调器的样式：

.loading-spinner
    .dot
        display: inline-block
        height: 8px
        width: 8px
        margin: 0 5px
        border-radius: 50%
        background-color: $ssp-spinner
        animation-duration: 1s
        animation-iteration-count: infinite

    .dot1
        margin-left: 0
        animation-name: spinner1
    .dot2
        animation-name: spinner2
    .dot3
        animation-name: spinner3
    .dot4
        animation-name: spinner4
    .dot5
        margin-right: 0
        animation-name: spinner5


@keyframes spinner1
    0%
        opacity: 1
    20%
        opacity: .8
    40%
        opacity: .6
    60%
        opacity: .4
    80%
        opacity: .2
    100%
        opacity: 0

@keyframes spinner2
    0%
        opacity: .8
    20%
        opacity: .6
    40%
        opacity: .4
    60%
        opacity: .2
    80%
        opacity: 0
    100%
        opacity: 1

@keyframes spinner3
    0%
        opacity: .6
    20%
        opacity: .4
    40%
        opacity: .2
    60%
        opacity: 0
    80%
        opacity: 1
    100%
        opacity: .8

@keyframes spinner4
    0%
        opacity: .4
    20%
        opacity: .2
    40%
        opacity: 0
    60%
        opacity: 1
    80%
        opacity: .8
    100%
        opacity: .6

@keyframes spinner5
    0%
        opacity: .2
    20%
        opacity: 0
    40%
        opacity: 1
    60%
        opacity: .8
    80%
        opacity: .6
    100%
        opacity: .4

在这里，您可以snippet查找其工作原理。

为每个圆圈设置新的动画规则对我来说似乎是错误和冗长的。
如果您能帮助我找出正确的做法，我将不胜感激。

谢谢！

更新到@Sheraff答案：
我通过以下修改动画规则来更明确地更改不透明度。

我就是这样做的：

@keyframes spinner
    0%
        opacity: .2
    25%
        opacity: .4
    50%
        opacity: .6
    75%
        opacity: .8
    100%
        opacity: 1

最佳答案

实际上，如果它们都相同，则无需定义许多动画。只需使用animation-delay！

@keyframes spinner { from { opacity: 1; } to { opacity: 0; } }
.dot { animation-name: spinner; }
.dot1 { animation-delay: 0; }
.dot2 { animation-delay: .2s; }
.dot3 { animation-delay: .4s; }
.dot4 { animation-delay: .6s; }
.dot5 { animation-delay: .8s; }

我鼓励您查看css animations的MDN文档，以更详细地了解您可以做的很酷的事情！