CSS3 Spin Animation

158

Я просмотрел довольно много демонстраций и понятия не имею, почему я не могу заставить вращение CSS3 работать. Я использую последнюю стабильную версию Chrome.

Скрипка: http://jsfiddle.net/9Ryvs/1/

div {
  margin: 20px;
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 40000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 40000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 40000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transition: rotate(3600deg);
}
<div></div>

iambriansreed
источник

Ответы:

299

Для использования CSS3 Animation вы также должны определить фактические ключевые кадры анимации ( которые вы назвалиspin )

Прочитайте https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations для получения дополнительной информации

После того, как вы настроили время анимации, вам нужно определить внешний вид анимации. Это делается путем установления двух или более ключевых кадров с использованием @keyframesправила at. Каждый ключевой кадр описывает, как анимированный элемент должен отображаться в данный момент в течение последовательности анимации.


Демо на http://jsfiddle.net/gaby/9Ryvs/7/

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
Габриэле Петриоли
источник
9
Вы получаете ✓, потому что вы объяснили это лучше всего, и вы единственный ответ, который включал все префиксные версии.
iambriansreed
53
Это супер придирчиво, но вы действительно должны оживить его до 359 градусов. 360 и 0 градусов одинаковы в радиальном направлении, поэтому анимация будет на короткое время останавливаться на полном обороте.
Адам Грант
1
@AdamGrant Спасибо, это почти вызвало у меня головную боль сегодня lol
mattslone
5
Вы хотите анимировать до 359,9999999999 градусов, а не 359. Градусы вращения - это непрерывный диапазон [0, 360), и если вы повернетесь до 359,0, у вас будет 1 градусный тик в начале каждого поворота, когда он деформируется с 359 до 0 .
mdonoughe
16
Чтобы уточнить все эти комментарии, которые дают неверную информацию ... выбранный ответ является ПРАВИЛЬНЫМ без изменений. 0 и 360 градусов на самом деле разные в глазах браузера, но при этом остаются одной и той же точкой. Например, если вы попытаетесь повернуть его от 0 градусов до 0 градусов (или от 360 градусов до 360 градусов), он вообще не будет вращаться. Вращение его от 0 до 360 градусов говорит браузеру повернуть объект на 360 градусов перед завершением анимации. Установите animation-iteration-count: infinite;и у вас будут бесконечные кадры в анимации. Даже 20-минутное вращение будет выглядеть безупречно и плавно.
Джакуртис
28

Вы не указали ни одного ключевого кадра. Я заставил это работать здесь .

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation: spin 4s infinite linear;
}

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

Вы действительно можете сделать много действительно крутых вещей с этим. Вот тот, который я сделал ранее .

:)

NB. Вы можете пропустить необходимость записывать все префиксы, если используете -prefix-free .

Джезен Томас
источник
17

Начиная с последней версии Chrome / FF и в IE11 префикс -ms / -moz / -webkit не требуется. Вот более короткий код (на основе предыдущих ответов):

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;

    /* The animation part: */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

Демонстрация в реальном времени: http://jsfiddle.net/9Ryvs/3057/

oriadam
источник
5
Объедините правила анимации с сокращением animation: spin 4s linear infinite.
Джош Хабдас
10

HTML с удивительным шрифтом.

<span class="fa fa-spinner spin"></span>

CSS

@-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    to {transform:rotate(360deg);}
}

.spin {
    animation: spin 1000ms linear infinite;
}
Пере Страницы
источник
1
Вы также получите мое возражение за добавление определения .spin
Блэр Коннолли
6

Единственный ответ, который дает правильный 359 градусов:

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

&.active {
  animation: spin 1s linear infinite;
}

Вот полезный градиент, чтобы вы могли доказать, что он вращается (если это круг):

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
danday74
источник
4

Для поворота вы можете использовать ключевые кадры и преобразование.

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

пример


источник
4

Для завершения, вот пример Sass / Compass, который действительно сокращает код, скомпилированный CSS будет включать в себя необходимые префиксы и т. Д.

div
  margin: 20px
  width: 100px 
  height: 100px    
  background: #f00
  +animation(spin 40000ms infinite linear)

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))
miphe
источник