Пульсация — это визуальный эффект, при котором элемент плавно увеличивается и уменьшается, имитируя дыхание или сердцебиение. Этот эффект привлекает внимание, но остаётся достаточно мягким, чтобы не раздражать пользователя.
Это статья из цикла заметок по 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;   } } |