CSS通过改变不透明度加载微调器动画

Question

我必须做一个由 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

Answer 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 文档，以更详细地了解您可以做的很酷的事情！