Introduction

Animations make your website more interactive and engaging. They help bring life to static elements and improve user experience.

👉 With CSS, you can create animations without using JavaScript.

What You’ll Learn

• What are CSS animations
• How to use @keyframes
• Animation properties
• Simple animation examples
• Real-world use cases

What is CSS Animation?

CSS animations allow you to change element styles over time.

👉 Instead of instant changes, animations create smooth transitions between states.

Step 1: Understanding @keyframes

The @keyframes rule defines the animation steps.

Syntax:

@keyframes animationName {
  from {
    property: value;
  }
  to {
    property: value;
  }
}

Example:

@keyframes changeColor {
  from {
    background-color: blue;
  }
  to {
    background-color: red;
  }
}

Step 2: Applying Animation to an Element

div {
  animation-name: changeColor;
  animation-duration: 3s;
}

This means:

• Run animation named changeColor
• Duration = 3 seconds

Important Animation Properties

Instead of writing many separate properties, we often use shorthand:

animation: name duration timing-function delay iteration-count;

Common Properties:

• animation-name → name of animation
• animation-duration → time (e.g., 2s)
• animation-timing-function → speed curve (ease, linear)
• animation-delay → delay before start
• animation-iteration-count → number of repeats

Understanding Animation Timing Functions

Timing functions control the speed of animation.

animation: fadeIn 2s ease-in-out;

Common values:

• linear → same speed
• ease → slow start, fast middle
• ease-in → slow start
• ease-out → slow end
• ease-in-out → smooth start and end

👉 Use ease-in-out for natural animations.

Animation Delay and Iteration

You can control when and how many times animation runs.

.box {
  animation: fadeIn 2s ease 1s 3;
}

👉 Explanation:

• 2s → duration
• 1s → delay
• 3 → runs 3 times

👉 Use infinite for continuous animations.

Animation Fill Mode (Important)

Controls what happens before and after animation.

.box {
  animation: fadeIn 2s forwards;
}

Values:

• forwards → keeps final state
• backwards → applies initial state early
• both → applies both

👉 Useful for UI transitions.

Multiple Animations

You can apply more than one animation.

.box {
  animation: fadeIn 2s ease, spin 1s linear infinite;
}

👉 Combines effects for advanced UI.

Real-World Example: Notification Animation

@keyframes slideDown {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.notification {
  animation: slideDown 0.5s ease-out;
}

👉 Used in:

• Alerts
• Toast messages
• Dropdowns

Performance Tips (Very Important)

Animations can affect performance if used incorrectly.

✔ Use transform instead of position changes
✔ Avoid animating width/height frequently
✔ Keep animations short (0.3s–0.8s ideal)
✔ Test on mobile devices

👉 This makes your animations smooth and fast.

When to Use Animations

Use animations when:

• You want user feedback (button click)
• You want smooth transitions
• You want to highlight elements
• You want better user experience

Avoid animations when:

• They distract users
• They slow down the page
• They are unnecessary

Example 1: Moving Box

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: moveRight;
  animation-duration: 2s;
}

Example 2: Fade In Effect

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

.box {
  animation: fadeIn 2s ease-in;
}

Notice shorthand:

animation: name duration timing-function;

Example 3: Button Hover Animation

button {
  transition: 0.3s;
}

button:hover {
  transform: scale(1.1);
}

👉 Creates interactive button effect.

Example 4: Loading Spinner

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loader {
  border: 4px solid #ddd;
  border-top: 4px solid black;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

👉 Commonly used in websites while loading data.

Real-World Usage

CSS animations are used in:

• Buttons and hover effects
• Loading indicators
• Page transitions
• Navigation menus
• Micro-interactions

👉 They improve user experience and make UI more engaging.

Modern Usage Tips

• Keep animations simple and smooth
• Use transition + transform for performance
• Avoid heavy animations on large elements
• Use ease or ease-in-out for natural motion

Common Mistakes

• Using too many animations (bad UX)
• Very fast or very slow animations
• Not using transform (performance issue)
• Overcomplicated keyframes

Practical Task

Task 1: Fade Effect

Create a box that fades in using @keyframes.

Task 2: Button Hover

Add scale effect on hover.

Task 3: Loader

Create a spinning loader.

Task 4: Repeating Animation

Use infinite to repeat animation.

Task 5: Mini Project

Create a page with:

• Animated button
• Loading spinner
• Fade-in text

Task 6: Delay Animation

Add delay before animation starts.

Task 7: Infinite Animation

Create a continuously rotating element.

Task 8: Multiple Animations

Apply two animations to one element.

Task 9: Notification UI

Create a sliding notification box.

Important Tip

• @keyframes defines animation steps
• Use animation shorthand for simplicity
• transform is better for performance
• Keep animations smooth and minimal

Conclusion

CSS animations help you create engaging and dynamic web designs without JavaScript. By using keyframes and animation properties, you can build smooth effects that enhance user experience.

👉 Practice different animations
👉 Keep them simple
👉 Use them wisely for better UI