The animation shorthand sets every part in one line.

Real code rarely spells out every animation- property. The shorthand does it in one line: animation: pulse 2s ease-in-out 0.5s infinite alternate both;. The order is free, with one rule: the first time is the duration and the second is the delay.

infinite is the iteration count, how many play-throughs to run. Each iteration goes from the first keyframe to the last. alternate plays every other iteration backwards, so it never snaps back to the start.

The fill mode both keeps the first keyframe's styles during the delay and the last keyframe's styles after the end, so nothing flickers.

<div class="toast">Message sent</div>

@keyframes rise {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
.toast {
  padding: 12px 16px;
  color: white;
  background-color: #264653;
  animation: rise 0.4s ease-out 1s both;
}