Keyframe Animations

Define the steps with @keyframes

@keyframes defines what happens at each stage (from/to, or percentages). Then animation runs it on an element.

<style>
  @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  .loader {
    width:46px; height:46px; border:5px solid #e0e7ff; border-top-color:#4338ca;
    border-radius:50%; animation: spin 1s linear infinite; margin: 14px;
  }
</style>
<div class="loader"></div>

This is a classic loading spinner, built in two parts. First, @keyframes spin defines the motion: from (rotate 0°) to to (rotate 360°) — a full turn. Second, the .loader is a circle (border-radius: 50%) with a light grey border but a dark top border, and animation: spin 1s linear infinite runs the keyframes: each spin takes 1 second, at a steady (linear) speed, repeating forever (infinite). Because only the top border is dark, the endless rotation reads as a spinning loader.

<style>
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
  }
  .ball { width:40px; height:40px; background:#06b6d4; border-radius:50%;
          animation: bounce 0.8s ease-in-out infinite; margin: 20px; }
</style>
<div class="ball"></div>

This time the @keyframes bounce uses percentages instead of from/to, which lets you describe more than two stages. At 0% and 100% the ball sits at its normal spot (translateY(0)), and at 50% — the middle of the animation — it is lifted -20px. So over each 0.8-second cycle the ball rises to the top and falls back down, and infinite repeats it. Percentage keyframes are how you build multi-step animations like bounces, pulses and wiggles.