@keyframes lists the stops, and an element plays them.

A transition needs a change, like hover, before it starts. An animation plays by itself, from the moment the page loads. You describe it once with @keyframes and a name, then attach that name to any element.

Inside, each keyframe is a stop in time: from is the start, to is the end, and percentages like 50% sit in between. Each stop holds the styles for that moment, and the browser draws every frame between them.

Attach it with animation-name: pulse and animation-duration: 2s. With no duration, the animation lasts zero seconds and you see nothing.

<span class="live">Live</span>

@keyframes pulse {
  from { opacity: 1; }
  50% { opacity: 0.3; }
  to { opacity: 1; }
}
.live {
  font-weight: bold;
  color: crimson;
  animation-name: pulse;
  animation-duration: 2s;
}

It plays once when the page loads, so press run again to replay it; two lessons from now it will repeat.