Эффект вращения изображения на CSS3
Сегодня вы узнаете,как сделать эффект вращения и увеличения изображения при наведении курсора мыши.Мы будем использовать только чистый CSS3.Это один из моих самых любимых эффектов CSS анимации.
CSS
Для начала создадим базовую анимацию с помощью свойства @-webkit-keyframes:
Свойство -webkit-transform property является аниматором в этой анимации.Определим основные состояния элемента:
0%-вращение 0, масштабирование 1 - исходное состояние анимации.
50%-вращение на 360 градусов , и элемент увеличивается в размерах в 2 раза.
100%-элемент должен вернуться к своей первоначальной форме.
Теперь сделаем чтобы при наведении курсора мыши на картинку,она переворачивалась и увеличивалась :
События назначены с помощью свойства -webkit-animation-name .
Дополнительные свойства отвечают за:
-webkit-animation-duration – задает время, в течении которого будет происходить анимация – 500мс.
-webkit-animation-iteration-count – отвечает за то, чтобы анимация выполнялась только раз.
-webkit-animation-timing-function – описывает метод расчета промежуточных значений свойств при анимации – значение easy-out.
Рекомендую использовать эти эффекты с изображениями, у которых заранее известны размеры, с фоновыми изображениями.
CSS
Для начала создадим базовую анимацию с помощью свойства @-webkit-keyframes:
Код
@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}
0% { -webkit-transform:rotate(0) scale(1) }
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}
Свойство -webkit-transform property является аниматором в этой анимации.Определим основные состояния элемента:
0%-вращение 0, масштабирование 1 - исходное состояние анимации.
50%-вращение на 360 градусов , и элемент увеличивается в размерах в 2 раза.
100%-элемент должен вернуться к своей первоначальной форме.
Теперь сделаем чтобы при наведении курсора мыши на картинку,она переворачивалась и увеличивалась :
Код
a.advert:hover {
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;
/* mozilla */
-moz-transform:rotate(360deg) scale(2);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;
/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-o-transition-timing-function: ease-out;
/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;
/* mozilla */
-moz-transform:rotate(360deg) scale(2);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;
/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-o-transition-timing-function: ease-out;
/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}
События назначены с помощью свойства -webkit-animation-name .
Дополнительные свойства отвечают за:
-webkit-animation-duration – задает время, в течении которого будет происходить анимация – 500мс.
-webkit-animation-iteration-count – отвечает за то, чтобы анимация выполнялась только раз.
-webkit-animation-timing-function – описывает метод расчета промежуточных значений свойств при анимации – значение easy-out.
Рекомендую использовать эти эффекты с изображениями, у которых заранее известны размеры, с фоновыми изображениями.
0| Всего комментариев: 0 | |
 | Информация: Посетители, находящиеся в группе Гости, не могут оставлять комментарии. |