CSS动画-旋转器/加载器速度

Question

我有以下来自https://loading.io/css/的旋转动画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属性来实现，但似乎不能在不弄乱动画的情况下使其更快。

- whatamidoingwithmylife

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>

- Temani Afif

Answer 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 #58c;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #58c 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>

---

更快

调整动画速度和动画延迟是正确的。您只需要相应地进行调整即可。

.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 #b00;
      border-radius: 50%;
      animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: #b00 transparent transparent transparent;
    }
    .lds-ring div:nth-child(1) {
      animation-delay: -0s;
    }
    .lds-ring div:nth-child(2) {
      animation-delay: -0.08s;
    }
    .lds-ring div:nth-child(3) {
      animation-delay: -0.1s;
    }
    @keyframes lds-ring {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

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

- DreamTeK

Answer 3

您在此处使用了简写动画。

animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

这基本上解析为：

animation-name: lds-ring;
animation-duration: 1.2s;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
animation-iteration-count: infinite;

为了让它更快，你需要减少动画时长。 想要进一步了解，请阅读动画属性。

- Benjay

---

请重新阅读问题，正如所述，我已经尝试过调整animation-duration属性，它确实加快了速度，但它会破坏动画：http://prntscr.com/l4c0hv - whatamidoingwithmylife

Answer 4

    .loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid black;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin .7s linear infinite;
        }

        /* Safari */
        @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
        }
    <div class="loader"></div>

- Jitender Sharma

Answer 5

更改动画属性并尝试。

animation: lds-ring1.2秒cubic-bezier（0.5，0，0.5，1）infinite;

- Karthick Srinivasan

---

请重新阅读问题，正如所述，我已经尝试过调整animation-duration属性，它确实加快了速度，但它会破坏动画：http://prntscr.com/l4c0hv - whatamidoingwithmylife

Answer 6

如果您仍然遇到使用的Spinner问题，请尝试以下方法...

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999999;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 12px solid #f3f3f3;
  border-radius: 50%;
  border-top: 12px solid #004C91;
  width: 75px;
  height: 75px;
  -webkit-animation: spin .9s linear infinite;
  animation: spin 1s linear infinite;
}

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div id="loader"></div>

- Karthick Srinivasan