Как заставить «вращающуюся анимацию» менять скорость наугад. Непоседа спиннер анимация.

Question

Как заставить «вращающуюся анимацию» менять скорость наугад. Непоседа спиннер анимация.

1

Я создал этот анимированный fidget spinner для проекта.

Прямо сейчас я просто поворачиваю объект, используя ключевые кадры CSS.

Однако мне было интересно, как я буду делать изменения скорости более случайным образом? Например, времена, когда его вращение происходит медленнее, чем времена, когда он быстро вращается.

Вот пример типа анимации спина, который мне бы хотелось: https://68.media.tumblr.com/6b689487196da8bea9d540e203f7cd2e/tumblr_oqapg6uMXW1s5laego1_500.gif

@-webkit-keyframes spinnerRotate
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(360deg);}
}

Patrick 06 июнь 2017, в 14:10

Источник

Теги:

javascript

css

css-animations

animation

jquery-animate

1 ответ

Ещё вопросы

vals · Answer 1 · 2017-06-06T19-29-00.000Z

Одна из возможностей состоит в том, чтобы вложить несколько контейнеров и установить для каждой анимации другую анимацию, но вы можете повторно использовать ключевые кадры между ними.

Играйте со временем и так, и вы можете получить разные эффекты:

div {
   display: inline-block;
}

.inner {
  width: 200px;
  height: 200px;
  background-color: tomato;

}

.container {
   margin: 30px;
   animation: rotate 3s ease-in-out infinite;
}

.container2 {
   animation: rotate 5s ease-in-out infinite;
}

.container3 {
   animation: rotate 7s ease-in-out infinite;
   animation-direction: alternate-reverse;
}

@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

<div class="container">
<div class="container2">
<div class="container3">
<div class="inner">
</div>
</div>
</div>
</div>