How to Create CSS Transitions

<!DOCTYPE html>
<html>
<head>
  <title>CSS Transitions</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 40px; }
    
    .button {
      background: #3b82f6;
      color: white;
      padding: 15px 30px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.3s ease;
    }
    
    .button:hover {
      background: #2563eb;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    
    .card {
      width: 250px;
      padding: 20px;
      background: white;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      margin: 20px 0;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .card:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
    
    .box {
      width: 100px;
      height: 100px;
      background: #10b981;
      transition: all 0.5s ease-in-out;
      margin: 20px 0;
    }
    
    .box:hover {
      width: 200px;
      background: #f59e0b;
      border-radius: 50%;
    }
    
    /* Different timing functions */
    .ease { transition: all 1s ease; }
    .linear { transition: all 1s linear; }
    .ease-in { transition: all 1s ease-in; }
    .ease-out { transition: all 1s ease-out; }
    .cubic { transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
    
    .timing-demo {
      display: flex;
      gap: 10px;
      margin: 20px 0;
    }
    
    .timing-box {
      width: 50px;
      height: 50px;
      background: #8b5cf6;
      transition: transform 1s;
    }
    
    .timing-demo:hover .timing-box {
      transform: translateX(200px);
    }
  </style>
</head>
<body>
  <h1>CSS Transitions Demo</h1>
  
  <h2>Button Hover Effect</h2>
  <button class="button">Hover Me</button>
  
  <h2>Card Hover Effect</h2>
  <div class="card">
    <h3>Card Title</h3>
    <p>Hover over this card to see the effect.</p>
  </div>
  
  <h2>Shape Transformation</h2>
  <div class="box"></div>
  
  <h2>Different Timing Functions</h2>
  <div class="timing-demo">
    <div class="timing-box ease" title="ease"></div>
    <div class="timing-box linear" title="linear"></div>
    <div class="timing-box ease-in" title="ease-in"></div>
    <div class="timing-box ease-out" title="ease-out"></div>
    <div class="timing-box cubic" title="cubic-bezier"></div>
  </div>
  <p>Hover over the boxes to see different timing functions.</p>
</body>
</html>