X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-28
  • 22913 переглядів

  • Дизайн та розробка сайту

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

У меня уже была статья с интересной анимацией. Там при наведении изображение поворачивалось вокруг оси на 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
Проголосовало: 15, в среднем: 4.9 из 5
Читайте також