Как сделать пульсирующую анимацию

Короткий ответ

Анимация, которая чуть увеличивает элемент и возвращает обратно:

<style>
  @keyframes pulse { 50% { scale: 1.1; } }
  .heart { display: inline-block; margin: 16px; font-size: 40px; color: crimson; animation: pulse 1s ease-in-out infinite; }
</style>
 
<span class="heart">♥</span>

Ключевой кадр 50% — середина цикла. Начало и конец не указаны, поэтому берутся обычные стили, и цикл замыкается без рывка.

Расходящееся кольцо

Точка «в эфире» или новое уведомление: тень растёт и тает:

<style>
  @keyframes ring { from { box-shadow: 0 0 0 0 rgb(220 20 60 / 60%); } to { box-shadow: 0 0 0 14px rgb(220 20 60 / 0%); } }
  .live { display: inline-block; width: 12px; height: 12px; margin: 16px; border-radius: 50%; background: crimson; animation: ring 1.4s infinite; }
</style>
 
<span class="live"></span> Live

Растяжение тени (четвёртое число) увеличивается, а цвет становится прозрачным — получается волна, которая расходится от точки.

Привлечь внимание и остановиться

Бесконечная пульсация раздражает. Часто достаточно нескольких повторов: animation: pulse 1s ease-in-out 3 — три раза и всё.

Частая ошибка

Пульсацию делают через width и height: соседние элементы начинают дёргаться вместе с ней. scale и box-shadow не меняют раскладку, поэтому соседи стоят на месте. И проверьте, как анимация ведёт себя при включённом в системе уменьшении движения.