CSS анимация - скорость вращения - PullRequest
Новая
       9

CSS анимация - скорость вращения

0 голосов
/ 10 октября 2018

У меня есть следующий код 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 голосов
/ 10 октября 2018 
    .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>
0 голосов
/ 10 октября 2018

ОРИГИНАЛ 

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

FASTER

Правильная настройка скорости анимации и задержки анимации.Вы просто должны настроить его соответственно. 

.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>
0 голосов
/ 10 октября 2018

Вам просто нужно изменить 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>
0 голосов
/ 10 октября 2018

Тем не менее, если у вас есть проблемы со счетчиком, который вы использовали, попробуйте это ... 

#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>
0 голосов
/ 10 октября 2018

Здесь вы используете сокращенную анимацию.

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;

Чтобы сделать это быстрее, вы должны опуститьпродолжительность анимации.Для дальнейшего объяснения прочитайте это свойство анимации

0 голосов
/ 10 октября 2018

Измените свойство анимации и попробуйте.

animation: lds-ring 1.2s cubic-bezier (0.5, 0, 0.5, 1) бесконечно;

...