HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Animations

CSS Animations (@keyframes)

While transitions require a trigger (like hovering), animations can run automatically, loop infinitely, and contain complex multi-step sequences.

How it works:

Define Keyframes: Use the @keyframes rule to specify the CSS styles at different stages (e.g., 0%, 50%, 100%).
Apply the Animation: Bind the animation to an element using the animation property (specifying the keyframe name, duration, timing function, and iteration count).

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { background: #2c3e50; padding: 50px; display: flex; justify-content: center; align-items: center; height: 60vh; }
    
    /* 1. Define the Keyframes */
    @keyframes pulse-glow {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
      }
      50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 20px rgba(46, 204, 113, 0); /* Fades out to 0 opacity */
      }
      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
      }
    }
    
    .animated-orb {
      width: 150px;
      height: 150px;
      background-color: #2ecc71;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-family: sans-serif;
      font-size: 24px;
      
      /* 2. Apply the Animation */
      /* name | duration | timing | delay | iteration-count | direction */
      animation: pulse-glow 2s ease-in-out infinite;
    }
  </style>
</head>
<body>

</body>
</html>

Result

Topics