A CSS animation lets elements move/change automatically over time

(no hover, no click needed)

Transition vs Animation

• Transition → needs a trigger (hover, click)
• Animation → runs automatically (or controlled)

1. Basic Structure

CSS animation has 2 main parts:

1️⃣ Define animation (keyframes)

2️⃣ Apply it to element

Example

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.box {
  animation: fadeIn 1s ease;
}

👉 This makes element fade in automatically