Главная » Рецепты CSS » Анимация (покачивание-swing) текста или изображения при наведении мыши

Анимация (покачивание-swing) текста или изображения при наведении мыши

2017-12-07 / Вр:23:02 / просмотров: 6473

Всем привет!
Недавно у меня был заказ и нужно было сделать, чтобы ярлыки висели над кнопкой «Акция».
Но это должны были быть не просто ярлыки, а при наведении на них мышкой, они должны были покачиваться.
Вот такое получилось:

Естественно, это просто картинка и эффекта покачивания вы не увидите, так как тут много дополнительных стилей, которые вам будут просто мешать.
Потому решил скинуть обычный код без лишнего, а вы под свои потребности уже все необходимое подставите.

[ демонстрация ]

Теперь сам код:

HTML:

<img src="bloggood_ru.png" class="swing1">
<img src="bloggood_ru.png " class="swing2">
<img src="bloggood_ru.png " class="swing3">

«swing1», «swing2» и «swing3» - эти классы предопределяют, какой эффект должен быть.

CSS:

@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}

40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}

60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}

80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}

100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}

@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
-ms-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}

40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
-ms-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}

60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
-ms-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}

80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
-ms-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}

100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-ms-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}

.swing1:hover {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
.swing2:hover {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-animation-name: swing;
animation-name: swing;
}
.swing3:hover {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-animation-name: swing;
animation-name: swing;
}

Все, проверяйте и смотрите результат!