Категория:
Опубликовано:

Кроссбраузерное вращение (анимация) элемента

Вращение элемента

"GIF уже не торт"

XXI век, CSS3, программная анимация на стороне клиента...

В общем, будем крутить блоки, все на чистом CSS, с поддержкой максимального количества браузеров "староверов".

Заставить элемент вращаться можно с помощью CSS3-свойств "animation".

.rotate {
  animation-name: cog;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

Для придания кроссбраузерного вращения блока, в таблице стилей достаточно прописать следующее:

.rotate {
  -webkit-animation-name: cog;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: cog;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
   -ms-animation-name: cog;
  -ms-animation-duration: 5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
 
  animation-name: cog;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@-ms-keyframes cog {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes cog {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes cog {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes cog {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}
  • animation-duration - скорость врашения;
  • animation-iteration-count: infinite - отвечает за "бесконечность" вращения;

Теперь можно просто задавать класс ".rotate" для нужного блока, и наслаждаться магией.

Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.

Комментарии

Помогите пожалуйста с CSS, можно ли описанным Вами в этой статье способом реализовать "кроссбраузерный" поворот как тут при наведении на картинку: ]]>http://spf39.fr/lien-site-views]]> (пример не работает ie вроде бы из-за параметра height, который неверно определяется в ie)

<blockquote>Для анимации элемента при наведении используйте псевдокласс ":hover"</blockquote> так и делал
использую IE до 10-й версии, но картинка не меняется, а ... посмотрите пожалуйста на сайте, потому что не знаю как описать искаженную работу...

использую IE до 10-й версии, но картинка не меняется

Все верно.

простите, что вы имели ввиду, написав "Все верно."?

IE до 10-й версии не поддерживает анимацию.

Вы имеете ввиду до 10-й версии включительно?

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

Уточните, пожалуйста, речь идёт о разных анимациях одного элемента или разных анимациях нескольких элементов?

Речь идет об одной анимации, одного элемента, для разных браузеров.