Keyframes Status Pulse

A status dot uses keyframes to loop opacity and scale changes that call attention to live work.

Program

@keyframes names intermediate animation states. animation applies those states repeatedly to an element.

keyframes_status_pulse.html

<style>
  @keyframes pulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.25); }
  }
  .status { width: 16px; height: 16px; border-radius: 50%; background: #dc2626; animation: pulse 1.2s infinite; }
</style>
<span class="status" aria-label="Recording"></span>

@keyframes defines named animation steps.

@keyframes

animation animation applies keyframes to an element over time.