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/