Пульсация — это визуальный эффект, при котором элемент плавно увеличивается и уменьшается, имитируя дыхание или сердцебиение. Этот эффект привлекает внимание, но остаётся достаточно мягким, чтобы не раздражать пользователя.
Это статья из цикла заметок по CSS анимации и эффектам.
Когда использовать
- Для подчёркивания важного элемента (например, CTA-кнопки).
- Для декоративных целей — иконки, аватары, логотипы.
- Как индикатор активности (например, онлайн-статус).
Как реализовать
Пульсация обычно строится на анимации свойства transform: scale(...), повторяющейся в цикле.
Пример, того как это выглядит:
Вот пример на чистом CSS / HTML
|
1 |
<button class="pulse">Нажми меня</button> |
Стили
|
1 2 3 4 5 6 7 8 |
@keyframes css-animation-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } |
|
1 2 3 |
.pulse { animation: css-animation-pulse 1.5s ease-in-out infinite; } |
Объяснение
@keyframes pulseописывает, как изменяется масштаб элемента: сначала нормальный (scale(1)), затем увеличение (scale(1.1)), потом обратно.animation: pulse 1.5s ease-in-out infiniteозначает: запускать эту анимацию бесконечно, каждые 1.5 секунды, с плавным ускорением и замедлением (ease-in-out).
Вариации
- Увеличить масштаб сильнее (
scale(1.2)), если нужно большее привлечение внимания. - Добавить
opacityдля «дыхательного» ощущения:
|
1 2 3 4 5 6 7 8 9 10 |
@keyframes soft-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } } |