CSS Transitions and Animations

1. Introduction

Modern websites are no longer static pages filled only with text and images. Users expect smooth interactions, engaging effects, and polished motion. That’s where CSS transitions and animations come in.

These features allow developers to add life to web elements without relying on heavy JavaScript. Whether it’s a button that changes color when hovered, an image that fades in, or a box that slides into view, CSS makes it possible with just a few lines of code.

In this guide, we’ll explore transitions and animations in detail — from syntax and properties to advanced use cases, performance considerations, and accessibility best practices.

---

2. CSS Transitions

2.1 What is a Transition?

A transition allows you to change CSS properties smoothly over a given duration, instead of instantly. For example, when a button’s background changes on hover, it can gradually fade instead of switching abruptly.

Basic syntax:

selector {
  transition: property duration timing-function delay;
}

• property → The CSS property to animate (e.g., color, background, transform)
• duration → Time it takes (e.g., 0.3s, 1s)
• timing-function → The speed curve (ease, linear, ease-in-out)
• delay → Wait time before the transition starts

---

2.2 Example: Button Hover

button {
  background: blue;
  color: white;
  transition: background 0.3s ease, transform 0.2s ease;
}

button:hover {
  background: darkblue;
  transform: scale(1.05);
}

Result: When hovered, the button smoothly changes color and slightly enlarges.

---

2.3 Multiple Properties

You can animate several properties at once:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 0.5s ease, background 0.5s ease;
}

div:hover {
  width: 200px;
  background: green;
}

---

2.4 The transition Shorthand

Instead of writing individual properties (transition-property, transition-duration), you can use the shorthand:

.box {
  transition: all 0.3s ease-in-out;
}

⚠️ Note: all transitions every property, which can be inefficient. It’s better to specify only needed properties.

---

2.5 Timing Functions

CSS offers built-in easing functions:

• linear → Constant speed
• ease → Default (slow → fast → slow)
• ease-in → Starts slow, ends fast
• ease-out → Starts fast, ends slow
• ease-in-out → Starts slow, speeds up, slows again

Custom curves can be made with cubic-bezier(x1, y1, x2, y2).

Example:

.box {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

---

2.6 Transition Delays

You can delay when the transition starts:

button {
  transition: background 0.5s ease 0.2s; /* 0.2s delay */
}

---

2.7 When to Use Transitions

✅ Great for hover effects, button states, simple UI feedback
❌ Not ideal for complex sequences — use animations instead.

---

3. CSS Animations

3.1 What is an Animation?

Unlike transitions, animations don’t depend on user interaction. They can run automatically, loop infinitely, and define complex sequences of changes using keyframes.

---

3.2 Keyframes

Keyframes define the stages of an animation.

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

You can also use percentages:

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

---

3.3 Applying an Animation

.box {
  animation: slideIn 1s ease-in-out;
}

Syntax:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

---

3.4 Animation Properties

• animation-name: Keyframes name
• animation-duration: How long it runs
• animation-timing-function: Easing
• animation-delay: Delay before start
• animation-iteration-count: Number of times (1, infinite)
• animation-direction: Normal, reverse, alternate
• animation-fill-mode: forwards, backwards, both
• animation-play-state: running or paused

---

3.5 Example: Bouncing Ball

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
}

.ball {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  animation: bounce 1s infinite ease-in-out;
}

---

3.6 Chaining Animations

You can define multiple animations:

.box {
  animation: fadeIn 1s ease-in, moveRight 2s ease-out 1s;
}

---

3.7 Animation Direction

• normal → Plays forward
• reverse → Plays backward
• alternate → Forward then backward
• alternate-reverse → Backward then forward

---

3.8 Fill Modes

Controls what happens before and after animation:

• none → No styles applied outside duration
• forwards → Retains final state
• backwards → Applies first frame during delay
• both → Applies both

Example:

.box {
  animation: fadeIn 2s forwards;
}

---

4. Transitions vs Animations

Feature	Transition	Animation
Trigger	User interaction / property change	Automatic or triggered by CSS/JS
Complexity	Simple changes	Multi-step sequences
Syntax	transition shorthand	@keyframes + animation properties
Loops	No	Yes (infinite)
Control	Limited	Full control (direction, delay, fill modes)

---

5. Practical Use Cases

5.1 Hover Effects

• Transitions → Buttons, links
• Animations → Underline effects

a {
  position: relative;
}

a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: blue;
  transition: width 0.3s;
}

a:hover::after {
  width: 100%;
}

---

5.2 Loading Spinners

@keyframes spin {
  100% { transform: rotate(360deg); }
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-top-color: blue;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

---

5.3 Image Slideshow

@keyframes fade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.slide {
  animation: fade 4s infinite;
}

---

5.4 CSS Animation + JavaScript

CSS animations can be controlled via JavaScript:

const box = document.querySelector('.box');
box.addEventListener('animationend', () => {
  console.log('Animation Finished!');
});

---

6. Performance & Best Practices

• Use transform and opacity for smooth GPU-accelerated animations.
• Avoid animating layout properties like width, height, margin.
• Use will-change to hint at upcoming animations:

.box {
  will-change: transform;
}

• Test across devices (mobile hardware can lag).
• Keep animations short (200–500ms) for UX.

---

7. Accessibility Considerations

• Respect user preferences with prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

• Avoid excessive motion (may cause dizziness or discomfort).
• Ensure animations enhance usability, not distract.

---

8. Conclusion

CSS Transitions and Animations empower developers to create beautiful, smooth, and interactive experiences without extra libraries.

• Use transitions for simple, triggered changes (like hover effects).
• Use animations for complex, sequenced, or looping effects.
• Keep performance and accessibility in mind.