How to Create CSS Animations

<!DOCTYPE html>
<html>
<head>
<style>
  body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: #1f2937; }
  
  .loader {
    width: 60px; height: 60px;
    border: 4px solid #374151;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  .pulse {
    width: 40px; height: 40px;
    background: #10b981;
    border-radius: 50%;
    margin: 40px;
    animation: pulse 1.5s ease-in-out infinite;
  }
  
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
  }
  
  .bounce {
    width: 30px; height: 30px;
    background: #f59e0b;
    border-radius: 50%;
    animation: bounce 0.6s ease-in-out infinite alternate;
  }
  
  @keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-30px); }
  }
</style>
</head>
<body>
  <div style="display:flex;gap:40px;align-items:center;">
    <div class="loader"></div>
    <div class="pulse"></div>
    <div class="bounce"></div>
  </div>
</body>
</html>