<!-- Define keyframes -->
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

<!-- Apply animation with animation-name -->
.element {
  animation-name: slideIn;
  animation-duration: 1s;
}

<!-- Element slides in from left -->

/* No animation: animation-name can be none -->
.element {
  animation-name: none;  <!-- no animation -->
}

/* Multiple animations: comma-separated -->
.element {
  animation-name: slideIn, fadeIn, bounce;
  animation-duration: 1s, 0.5s, 0.8s;
  /* Three animations apply simultaneously -->
}

<!-- Multiple animations with different timing -->

/* Using shorthand: animation property -->
.element {
  animation: slideIn 1s ease-out;
  /* animation-name: slideIn -->
  /* animation-duration: 1s -->
  /* animation-timing-function: ease-out -->
}

<!-- Short duration: quick feedback -->
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.notification-badge {
  animation-name: pulse;
  animation-duration: 0.6s;
  animation-iteration-count: infinite;
}

<!-- Quick visual feedback -->

/* Medium duration: entrance -->
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation-name: fadeIn;
  animation-duration: 0.8s;
}

<!-- Smooth entrance, not too slow -->

/* Long duration: complex sequence -->
@keyframes carousel {
  0% { transform: translateX(0); }
  25% { transform: translateX(-100%); }
  50% { transform: translateX(-200%); }
  75% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}

.carousel {
  animation-name: carousel;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

<!-- Takes time to complete full sequence -->

/* Different durations for different elements -->
.item:nth-child(1) {
  animation-duration: 0.5s;
}

.item:nth-child(2) {
  animation-duration: 0.6s;
}

.item:nth-child(3) {
  animation-duration: 0.7s;
}

<!-- Staggered timing without animation-delay -->

<!-- Loading spinner -->
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loader {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

<!-- Continuous rotation -->

/* Bounce entrance -->
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.modal {
  animation-name: bounce-in;
  animation-duration: 0.5s;
}

<!-- Bouncy entrance effect -->

/* Fade and slide -->
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  animation-name: slideUp;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
}

<!-- Smooth upward slide -->

/* Multiple animations together -->
@keyframes entrance {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 rgba(255,0,0,0); }
  50% { box-shadow: 0 0 10px rgba(255,0,0,0.5); }
}

.element {
  animation-name: entrance, glow;
  animation-duration: 0.6s, 1s;
  animation-timing-function: ease-out, ease-in-out;
}

<!-- Entrance and glow simultaneously -->

/* Conditional animations -->
.element {
  animation-name: none;  <!-- no animation by default -->
}

.element.active {
  animation-name: slideIn;
  animation-duration: 0.5s;
}

.element.hover:hover {
  animation-name: pulse;
  animation-duration: 0.4s;
}

<!-- Animation applied based on state -->

<!-- All individual properties -->
.element {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

<!-- Explicit control over each aspect -->

/* Shorthand syntax (more concise) -->
.element {
  animation: slideIn 1s ease-out 0.2s 1 normal forwards running;
  /* name duration timing-function delay iteration-count direction fill-mode play-state */
}

<!-- Same result, more compact -->

/* Practical: when to use which -->

/* Use shorthand for simple animations */
.button:hover {
  animation: pulse 0.4s ease-in-out;
}

/* Use individual properties for complex setups */
.complex-animation {
  animation-name: multistep;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(...);
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

<!-- More readable for complex cases -->

<!-- Pausing and resuming with JavaScript -->
element.style.animationPlayState = 'paused';
// Animation pauses at current point

element.style.animationPlayState = 'running';
// Animation resumes

/* CSS class approach -->
.element {
  animation: spin 2s linear infinite;
}

.element.paused {
  animation-play-state: paused;
}

<!-- Toggle class with JavaScript -->

/* Hover to pause -->
.element {
  animation: spin 2s linear infinite;
}

.element:hover {
  animation-play-state: paused;
}

<!-- Pauses on hover -->

/* Restart animation -->
element.style.animation = 'none';
// Remove animation

setTimeout(() => {
  element.style.animation = 'slideIn 0.5s ease-out';
}, 10);

<!-- Animation restarts from beginning -->

/* Animation complete event -->
element.addEventListener('animationend', function() {
  console.log('Animation finished');
  // Do something after animation
});

<!-- Detect when animation completes -->