Анимация дрожания изображения CSS

Віталий

10 років ago

Доброго времени суток. 🙂

У меня уже была статья с интересной анимацией. Там при наведении изображение поворачивалось вокруг оси на 360 градусов. Такой эффект был осуществлен с помощью CSS. Вот этот урок - Вращение элементов, кнопок, иконок, блоков при наведении с помощью CSS

В этом уроке тоже рассмотрим интересный эффект. Тут анимация представляет из себя дрожание, вибрации изображения при наведении и это все тоже осуществлено с помощью CSS. Конкретно благодаря параметру transform, будет совершено смешение на 4% длины влево и обратно назад. Все то за 0,1 секунду времени. В примере ниже видно как это работает на деле.

Делается токая анимация очень просто. Сначала нужно какому-нибудь элементу присвоить определенный класс. У нас это блок div, в стилях которого будет фоном изображение. Далее присваиваем ему класс wibro.

<div class="wibro"></div>

Потом просто добавляем стилей, настраиваем под себя и все готово.

.wibro{
    display: block;
    position: relative;
    width: 18px;
    height: 41px;
    background: url(tel.png) no-repeat 0 0;
	}
.wibro:hover {
    -webkit-animation: 0.1s tremor ease-out infinite;  
    animation: 0.1s tremor ease-out infinite;    
}
@-webkit-keyframes tremor {
	0%, 25% {
		left: -1px;
		top:-1px;
        -webkit-transform: translateX(-4%);
        transform: translateX(-4%);
	}
	50%, 100% {
		left: 1px;
		top: 1px;
        -webkit-transform: translateX(4%);
        transform: translateX(4%);
	}
}
@-moz-keyframes tremor {
	0%, 25% {
		left: -1px;
        -webkit-transform: translateX(-4%);
        transform: translateX(-4%);
	}
	50%, 100% {
		left: 1px;
        -webkit-transform: translateX(4%);
        transform: translateX(4%);
	}
}
@-ms-keyframes tremor {
	0%, 25% {
		left: -1px;
        -webkit-transform: translateX(-4%);
        transform: translateX(-4%);
	}
	50%, 100% {
		left: 1px;
        -webkit-transform: translateX(4%);
        transform: translateX(4%);
	}
}
@-o-keyframes tremor {
	0%, 25% {
		left: -1px;
        -webkit-transform: translateX(-4%);
        transform: translateX(-4%);
	}
	50%, 100% {
		left: 1px;
        -webkit-transform: translateX(4%);
        transform: translateX(4%);
	}
}
@keyframes tremor {
	0%, 25% {
		left: -1px;
        -webkit-transform: translateX(-4%);
        transform: translateX(-4%);
	}
	50%, 100% {
		left: 1px;
        -webkit-transform: translateX(4%);
        transform: translateX(4%);
	}
}

Больше ничего делать не надо. Можете нескольким элементам присвоить один класс и организовать им дрожание. Например, это могут быть социальные иконки, кнопки меню и тд.

На этом все, спасибо за внимание. 🙂

Exit mobile version