CSS3: анимация на примере вращения картинки вокруг своей оси
CSS3 крутая вещь, круче не придумать 😉
анимировать будем при наведении мыши на картинку
@keyframes rotate{
/* создаем анимацию и даем ей имя (rotate например) */
/* дальше задаем положение в начале и в конце */
from {
/*
для анимации используем трансформацию вращение
есть ешё сдвиг translate(x,y) и увеличение scale(z)
*/
transform: rotate(0);
/* можно анимировать размеры и прочие парамтры цсс */
}
to {
transform: rotate(360deg);
}
/* или вместо from|to пишем процент выполнения сцены, от 0% до 100%, любой нужный */
/*
так как поддерживают анимацию передовики Гекко и ВебКит,
запись выше не работает и каждому нужно написать свою
*/
}
@-moz-keyframes rotate{from {-moz-transform: rotate(0);} to {-moz-transform: rotate(360deg);}}
@-webkit-keyframes rotate{from {-webkit-transform: rotate(0);} to {-webkit-transform: rotate(360deg);}}
img {
padding-right: 13px;
}
img:hover {
/* анимировать будем при наведении мыши на картинку */
border: 1px solid #C0C0C0;
/* имя анимации, длительность, продолжительность циклов, "задержки" */
animation: rotate 0.5s infinite linear;
-moz-animation: rotate 0.5s infinite linear;
-webkit-animation: rotate 0.5s infinite linear;
/*
-webkit-animation-name — имя анимации
-webkit-animation-duration — время проигрывания анимации
-webkit-animation-timing-function — метод расчета промежуточных значений свойств для анимации
-webkit-animation-delay — задержка анимации
-webkit-animation-iteration-count — количество циклов анимации
-webkit-animation-direction — направление анимации
-webkit-animation-play-state — проигрывается ли анимация или стоит на паузе
*/}
Пример
Спасибо: https://deer.org.ua/2012/02/24/1/