CSS 动画 - 微调器/加载器速度

Question

我有以下用于我获得的微调动画的 CSS 代码:

https://loading.io/css/

CSS是:

.lds-ring {
      display: inline-block;
      position: relative;
      width: 64px;
      height: 64px;
    }
    .lds-ring div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      width: 51px;
      height: 51px;
      margin: 6px;
      border: 6px solid #000;
      border-radius: 50%;
      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: #000 transparent transparent transparent;
    }
    .lds-ring div:nth-child(1) {
      animation-delay: -0.45s;
    }
    .lds-ring div:nth-child(2) {
      animation-delay: -0.3s;
    }
    .lds-ring div:nth-child(3) {
      animation-delay: -0.15s;
    }
    @keyframes lds-ring {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

<div class="lds-ring"><div></div><div></div><div></div><div></div></div>

我想知道以何种方式更改 CSS 以加快动画速度。

我试着摆弄 animation-duration和 animation-delay属性，但我似乎无法在不弄乱动画的情况下使其更快。

Answer 1

您只需要更改 animation-duration和 animation-delay以同样的方式。例如，我将所有内容除以 2，这使动画速度提高了两倍。

.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #000;
  border-radius: 50%;
  animation: lds-ring /*1.2s*/0.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #000 transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: calc(-0.45s / 2);
}

.lds-ring div:nth-child(2) {
  animation-delay: calc(-0.3s / 2);
}

.lds-ring div:nth-child(3) {
  animation-delay: calc(-0.15s / 2);
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg)
  }
}

<div class="lds-ring">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

这是一个使用 CSS 变量的通用示例，您可以在其中轻松控制速度:

.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #000;
  border-radius: 50%;
  animation: lds-ring calc(1.2s / var(--d,1)) cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #000 transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: calc(-0.45s / var(--d,1));
}

.lds-ring div:nth-child(2) {
  animation-delay: calc(-0.3s / var(--d,1));
}

.lds-ring div:nth-child(3) {
  animation-delay: calc(-0.15s / var(--d,1));
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg)
  }
}

<div class="lds-ring">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="lds-ring" style="--d:1.2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="lds-ring" style="--d:2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="lds-ring" style="--d:3">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>