Категория:
Опубликовано:
Кроссбраузерное вращение (анимация) элемента
"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)
Для анимации элемента при наведении используйте псевдокласс ":hover"
Анимация не поддерживается IE до 10-й версии.
<blockquote>Для анимации элемента при наведении используйте псевдокласс ":hover"</blockquote> так и делал
использую IE до 10-й версии, но картинка не меняется, а ... посмотрите пожалуйста на сайте, потому что не знаю как описать искаженную работу...
Все верно.
простите, что вы имели ввиду, написав "Все верно."?
IE до 10-й версии не поддерживает анимацию.
Вы имеете ввиду до 10-й версии включительно?
Здесь есть ссылка на страницу с таблицей браузеров поддерживающих свойство.
Уточните, пожалуйста, речь идёт о разных анимациях одного элемента или разных анимациях нескольких элементов?
Речь идет об одной анимации, одного элемента, для разных браузеров.