Using CSS Transitions – CSS Tutorial

4/13/2025

#Using CSS Transitions – CSS Turial

Go Back

Using CSS Transitions – CSS Tutorial

CSS transitions allow web developers to create smooth, elegant animations without JavaScript. They make UI elements more interactive and visually appealing. This tutorial covers everything you need to know to get started with CSS transitions.

#Using CSS Transitions – CSS Turial

1. What Are CSS Transitions?

CSS transitions enable you to change property values over time, rather than instantly. This is perfect for hover effects, button animations, and more.

Basic Syntax

.element {
  transition: [property] [duration] [timing-function] [delay];
}

2. CSS Transition Properties

Property Description Example
transition-property Specifies the CSS property to animate transition-property: width;
transition-duration Sets how long the transition lasts (s or ms) transition-duration: 0.5s;
transition-timing-function Defines the speed curve of the animation transition-timing-function: ease-in-out;
transition-delay Sets a delay before the transition begins transition-delay: 0.2s;

3. Practical Examples

Example 1: Button Hover Effect

.button {
  background: #3498db;
  color: white;
  transition: background 0.3s ease;
}
.button:hover {
  background: #e74c3c;
}

Example 2: Expanding Width

.box {
  width: 100px;
  height: 100px;
  background: #2ecc71;
  transition: width 0.5s ease;
}
.box:hover {
  width: 200px;
}

Example 3: Fade-In Effect

.fade {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.fade.show {
  opacity: 1;
}

4. Transition Timing Functions

Value Behavior
ease Starts slow, speeds up, ends slow (default)
linear Constant speed
ease-in Starts slow
ease-out Ends slow
ease-in-out Slow start and end
cubic-bezier() Custom speed curve

5. Transition vs. Animation

Feature Transition Animation (@keyframes)
Trigger Requires a state change (e.g., :hover) Can run automatically or via JS
Complexity Simple property changes Supports complex, multi-step effects
Control Limited to start/end states Full control using keyframes
Performance Lightweight Slightly heavier

6. Best Practices

  • Animate transform and opacity for better performance.

  • Use subtle durations (0.3s–0.5s).

  • Use will-change to inform browsers about upcoming transitions:

.element {
  will-change: transform, opacity;
}

  • Test transitions on mobile for performance.

Conclusion

CSS transitions enhance user experience with lightweight and beautiful effects. They’re ideal for hover effects, fades, and basic animations. Master these basics to bring life to your web designs!

Table of content