Главная
Web-дизайн
Анимация дрожания изображения CSS

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

Вибрация изображения

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

У меня уже была статья с интересной анимацией. Там при наведении изображение поворачивалось вокруг оси на 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%);
	}
}

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

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




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(8 голосов, в среднем: 5 из 5)

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий