Category: 6. CSS Animations & Transitions

You can animate letters, word spacing, or even text-shadow.

Example:

@keyframes glow {
  0% { text-shadow: 0 0 5px red; }
  100% { text-shadow: 0 0 20px yellow; }
}
h1 {
  animation: glow 1s alternate infinite;
}

Practice Task:
Create a neon glowing heading.

• Use transform instead of top/left for better performance
• Keep animations short for better UX
• Avoid animating expensive properties like box-shadow on large elements

Practice Task:
Compare transform-based and margin-based animations.

You can run multiple animations one after another using delays.

Example:

.box {
  animation:
slideIn 1s ease,
fadeIn 1s ease 1s;
}

Practice Task:
Animate a box to slide in first, then fade in text inside it.

Use animation-play-state to pause or run animations dynamically.

Example:

.box {
  animation: pulse 1s infinite;
  animation-play-state: paused;
}
.box:hover {
  animation-play-state: running;
}

Practice Task:
Create an animation that only plays when hovered.

Use animation-iteration-count: infinite to keep animations running.

Example:

.loader {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Practice Task:
Create a rotating loader icon.

Important properties:

• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode

Practice Task:
Experiment with animation-direction: normal, reverse, alternate, alternate-reverse.

---

You can define multiple steps inside keyframes.

Example:

@keyframes moveBox {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}
.box {
  animation: moveBox 3s ease-in-out infinite;
}

Practice Task:
Make a box move in a square path using keyframes (top, right, bottom, left).

Unlike transitions, animations don’t need user interaction — they can run automatically and repeat.

Basic syntax:

@keyframes example {
  from { background: red; }
  to { background: blue; }
}
.box {
  animation: example 2s infinite alternate;
}

Practice Task:
Create a box that keeps changing its background color from red to blue.

You can animate multiple properties at once.

Example:

.box {
  transition: background 0.5s, transform 0.5s;
}
.box:hover {
  background: coral;
  transform: scale(1.2);
}

Practice Task:
Animate background color, box-shadow, and scale together on hover.

---

Lesson 5: Transition Delay

Add a delay before the transition starts.

Example:

.box {
  transition: background 0.5s ease 1s;
}

Practice Task:
Create a button that starts animating 1 second after hover.

Transform allows you to scale, rotate, move, or skew elements.

Example:

<style>
.box {
  width: 100px;
  height: 100px;
  background: lightblue;
  transition: transform 0.5s ease;
}
.box:hover {
  transform: scale(1.2);
}
</style>

<div class="box"></div>

Practice Task:
Create a box that rotates 45 degrees when hovered.