CSS Animations and Transitions:

4/13/2025

CSS Animations Transitions:

Go Back

CSS Animations and Transitions: How to Use CSS Transitions (With Examples)

CSS transitions allow you to smoothly change property values over a specified duration. Unlike CSS animations (which use @keyframes), transitions are simpler and ideal for hover effects, button interactions, and micro-interactions.

  1. What Are CSS Transitions? CSS transitions let you animate changes in CSS properties (like color, width, opacity) without JavaScript. They work by defining:

  • Which property to animate (transition-property)

  • How long the animation should take (transition-duration)

  • Delay before the animation starts (transition-delay)

  • Speed curve of the transition (transition-timing-function)

Basic Syntax

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

 

CSS Animations Transitions:

2. CSS Transition Properties

Property Description Example
transition-property Specifies which CSS property to animate transition-property: width;
transition-duration Sets how long the transition lasts (in s or ms) transition-duration: 0.5s;
transition-timing-function Controls the speed curve (ease, linear, ease-in-out) transition-timing-function: ease-in-out;
transition-delay Delays the start of the transition transition-delay: 0.2s;


Shorthand Example

button {
  background: blue;
  transition: background 0.3s ease-in-out 0.1s;
}
button:hover {
  background: red;
}

  1. Practical CSS Transition Examples

Example 1: Smooth Hover Effect

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

✅ Effect: Button color fades smoothly on hover.

Example 2: Expanding Width

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

✅ Effect: The box expands smoothly when hovered.

Example 3: Fade-In Effect

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

Effect: Element fades in when the .show class is added (useful with JavaScript).

  1. Transition Timing Functions Control the animation speed curve:

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 (advanced)

Example:

.element {
  transition: transform 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

 

5. Transition vs. Animation

Feature Transition Animation (@keyframes)
Trigger Needs a state change (e.g., :hover) Automatically or via JavaScript
Complexity Simple property changes Multi-step animations
Control Limited to start/end states Full control with keyframes
Performance Lightweight Slightly heavier

When to Use Transitions?

  • ✔ Hover effects

  • ✔ Micro-interactions (buttons, menus)

  • ✔ Simple state changes

When to Use Animations?

  • ✔ Complex multi-step animations

  • ✔ Looping effects

  • ✔ Scroll-triggered animations

  1. Best Practices for CSS Transitions

  • Optimize Performance – Animate opacity and transform (GPU-accelerated).

  • Keep It Subtle – Avoid excessive animations (0.3s–0.5s durations work best).

  • Use will-change for Smoothness – Helps browsers optimize rendering.

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

  • Test on Mobile – Some transitions may lag on low-end devices.

 

Conclusion

CSS transitions are perfect for smooth, lightweight animations without JavaScript. By mastering transition-property, duration, and timing-function, you can enhance user experience with engaging hover effects, fades, and transformations.

 

Table of content