How to make a pulse animation

Short answer

An animation that slightly enlarges the element and brings it back:

<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>

The 50% keyframe is the middle of the cycle. The start and end are not given, so the normal styles are used and the loop closes without a jump.

A spreading ring

A "live" dot or a new notification: the shadow grows and fades:

<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

The shadow's spread (the fourth number) grows while its color turns transparent — making a wave that spreads out from the dot.

Catch the eye, then stop

Endless pulsing gets annoying. A few repeats are often enough: animation: pulse 1s ease-in-out 3 — three times and done.

Common mistake

People build the pulse with width and height, and the neighboring elements start twitching with it. scale and box-shadow do not change the layout, so the neighbors stay still. Also check how the animation behaves when reduced motion is turned on in the system.