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 文档详细了解您可以做的很酷的事情!