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

时间：2018-10-10 06:35:34

标签： css css3 css-animations

对于从中获得的微调器动画，我有以下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属性，但是在不弄乱动画的情况下似乎无法使其更快。

6 个答案:

答案 0 :(得分：2)

您只需要以相同的方式更改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>

答案 1 :(得分：1)

原始

.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>

答案 2 :(得分：-1)

更改动画属性，然后尝试。

动画：lds-ring 1.2s 三次贝塞尔（0.5，0，0.5，1）无限；

答案 3 :(得分：-1)

您在这里使用速记动画。

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;

为了使其更快，您必须缩短动画持续时间。 有关更多说明，请阅读此animation property

答案 4 :(得分：-1)

如果您使用的微调器仍然有问题，请尝试... 

#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>

答案 5 :(得分：-1)

    .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>
相关问题
最新问题