CSS Transitions

Learn how to create smooth animations between CSS property changes using transitions for enhanced user experience.

CSS transitions allow you to create smooth animations when CSS properties change. They provide an easy way to add polish and interactivity to your website without JavaScript.

What are CSS Transitions?

Transitions smoothly animate changes from one CSS property value to another over a specified duration. Instead of instant changes, transitions create gradual effects.

Basic Syntax

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

Transition Properties

transition-property

Specifies which CSS properties to animate:

.box {
  transition-property: background-color;
  transition-property: width;
  transition-property: all; /* Animates all changing properties */
  transition-property: width, height, background-color; /* Multiple properties */
}

transition-duration

Specifies how long the transition takes:

.box {
  transition-duration: 0.3s; /* 300 milliseconds */
  transition-duration: 1s; /* 1 second */
  transition-duration: 500ms; /* 500 milliseconds */
}

transition-timing-function

Controls the speed curve of the transition:

.box {
  /* Predefined timing functions */
  transition-timing-function: ease; /* Default - slow start, fast, slow end */
  transition-timing-function: linear; /* Constant speed */
  transition-timing-function: ease-in; /* Slow start */
  transition-timing-function: ease-out; /* Slow end */
  transition-timing-function: ease-in-out; /* Slow start and end */
  
  /* Cubic bezier for custom curves */
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Steps for frame-by-frame animation */
  transition-timing-function: steps(4, end);
}

transition-delay

Specifies when the transition starts:

.box {
  transition-delay: 0s; /* No delay (default) */
  transition-delay: 0.5s; /* Wait 500ms before starting */
  transition-delay: 200ms; /* Wait 200ms */
}

Shorthand Syntax

Combine all properties in one declaration:

.box {
  /* property duration timing-function delay */
  transition: background-color 0.3s ease 0s;
  
  /* Multiple transitions */
  transition: width 0.5s ease, height 0.5s ease 0.2s;
  
  /* All properties */
  transition: all 0.3s ease;
}

Practical Examples

Button Hover Effect

<!DOCTYPE html>
<html>
<head>
<style>
  .button {
    padding: 12px 24px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .button:active {
    transform: translateY(0);
  }
</style>
</head>
<body>
  <button class="button">Hover Me</button>
</body>
</html>

Color Change

.box {
  background-color: #3498db;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: #e74c3c;
}

Size Change

.grow {
  width: 200px;
  height: 200px;
  background-color: #2ecc71;
  transition: width 0.3s ease, height 0.3s ease;
}

.grow:hover {
  width: 250px;
  height: 250px;
}

Opacity Fade

.fade {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.fade:hover {
  opacity: 0.5;
}

Transform Transitions

.transform-box {
  transform: scale(1) rotate(0deg);
  transition: transform 0.3s ease;
}

.transform-box:hover {
  transform: scale(1.1) rotate(5deg);
}

Complex Examples

Card with Multiple Transitions

<style>
  .card {
    width: 300px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
  }
  
  .card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.3s ease;
  }
  
  .card:hover .card-image {
    transform: scale(1.05);
  }
  
  .card-title {
    color: #333;
    transition: color 0.3s ease;
  }
  
  .card:hover .card-title {
    color: #3498db;
  }
</style>

<div class="card">
  <img class="card-image" src="image.jpg" alt="Card">
  <h3 class="card-title">Card Title</h3>
  <p>Card description goes here.</p>
</div>

.nav-link {
  position: relative;
  color: #333;
  text-decoration: none;
  padding: 10px 15px;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3498db;
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: #3498db;
}

.nav-link:hover::after {
  width: 100%;
}

Accordion

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion.open .accordion-content {
  max-height: 500px; /* Should be larger than actual content */
}

Loading Spinner

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  transition: transform 0.01s linear;
}

/* Would need JavaScript or animation for continuous rotation */

Transitionable Properties

Not all CSS properties can be transitioned. Here are commonly transitioned properties:

Layout:

width, height, padding, margin
top, right, bottom, left

Visual:

background-color, color
opacity
border-color, border-width
box-shadow

Transform:

transform (scale, rotate, translate, skew)

Text:

font-size
letter-spacing
line-height

Performance Considerations

Performance Tips

Best performance: transform and opacity (GPU-accelerated)
Good performance: color, background-color
Avoid: width, height, margin, padding (cause reflow)
Use transform: scale() instead of animating width/height
Use transform: translate() instead of animating top/left
Keep transitions under 300-400ms for best UX

Timing Function Comparison

/* Visual comparison of timing functions */
.ease { transition: transform 1s ease; }
.linear { transition: transform 1s linear; }
.ease-in { transition: transform 1s ease-in; }
.ease-out { transition: transform 1s ease-out; }
.ease-in-out { transition: transform 1s ease-in-out; }

Combining with JavaScript

<style>
  .modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .modal.show {
    opacity: 1;
    visibility: visible;
  }
</style>

<script>
  const modal = document.querySelector('.modal');
  const button = document.querySelector('.open-modal');
  
  button.addEventListener('click', () => {
    modal.classList.add('show');
  });
</script>

Best Practices

Transition Best Practices

Use transitions for subtle, enhancing effects
Keep durations between 200-400ms for most interactions
Use ease-out for entering elements (feels snappy)
Use ease-in for exiting elements (feels natural)
Use ease-in-out for middle-of-action transitions
Transition only the properties that change
Consider accessibility - some users prefer reduced motion
Test on different devices and browsers
Use transition: all sparingly (performance)

Reduced Motion Preference

Respect user preferences for reduced motion:

.element {
  transition: all 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

Common Patterns

Smooth Color Transition

.link {
  color: #333;
  transition: color 0.2s ease;
}

.link:hover {
  color: #3498db;
}

Scale on Hover

.image {
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.05);
}

Slide In from Side

.sidebar {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.sidebar.open {
  transform: translateX(0);
}

Transitions are powerful tools for creating smooth, professional interactions. Master them to significantly improve your website's user experience!

CSS transitions allow you to create smooth animations when CSS properties change. They provide an easy way to add polish and interactivity to your website without JavaScript.

What are CSS Transitions?

Transitions smoothly animate changes from one CSS property value to another over a specified duration. Instead of instant changes, transitions create gradual effects.

Basic Syntax

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

Transition Properties

transition-property

Specifies which CSS properties to animate:

.box {
  transition-property: background-color;
  transition-property: width;
  transition-property: all; /* Animates all changing properties */
  transition-property: width, height, background-color; /* Multiple properties */
}

transition-duration

Specifies how long the transition takes:

.box {
  transition-duration: 0.3s; /* 300 milliseconds */
  transition-duration: 1s; /* 1 second */
  transition-duration: 500ms; /* 500 milliseconds */
}

transition-timing-function

Controls the speed curve of the transition:

.box {
  /* Predefined timing functions */
  transition-timing-function: ease; /* Default - slow start, fast, slow end */
  transition-timing-function: linear; /* Constant speed */
  transition-timing-function: ease-in; /* Slow start */
  transition-timing-function: ease-out; /* Slow end */
  transition-timing-function: ease-in-out; /* Slow start and end */
  
  /* Cubic bezier for custom curves */
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Steps for frame-by-frame animation */
  transition-timing-function: steps(4, end);
}

transition-delay

Specifies when the transition starts:

.box {
  transition-delay: 0s; /* No delay (default) */
  transition-delay: 0.5s; /* Wait 500ms before starting */
  transition-delay: 200ms; /* Wait 200ms */
}

Shorthand Syntax

Combine all properties in one declaration:

.box {
  /* property duration timing-function delay */
  transition: background-color 0.3s ease 0s;
  
  /* Multiple transitions */
  transition: width 0.5s ease, height 0.5s ease 0.2s;
  
  /* All properties */
  transition: all 0.3s ease;
}

Practical Examples

Button Hover Effect

<!DOCTYPE html>
<html>
<head>
<style>
  .button {
    padding: 12px 24px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .button:active {
    transform: translateY(0);
  }
</style>
</head>
<body>
  <button class="button">Hover Me</button>
</body>
</html>

Color Change

.box {
  background-color: #3498db;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: #e74c3c;
}

Size Change

.grow {
  width: 200px;
  height: 200px;
  background-color: #2ecc71;
  transition: width 0.3s ease, height 0.3s ease;
}

.grow:hover {
  width: 250px;
  height: 250px;
}

Opacity Fade

.fade {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.fade:hover {
  opacity: 0.5;
}

Transform Transitions

.transform-box {
  transform: scale(1) rotate(0deg);
  transition: transform 0.3s ease;
}

.transform-box:hover {
  transform: scale(1.1) rotate(5deg);
}

Complex Examples

Card with Multiple Transitions

<style>
  .card {
    width: 300px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
  }
  
  .card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.3s ease;
  }
  
  .card:hover .card-image {
    transform: scale(1.05);
  }
  
  .card-title {
    color: #333;
    transition: color 0.3s ease;
  }
  
  .card:hover .card-title {
    color: #3498db;
  }
</style>

<div class="card">
  <img class="card-image" src="image.jpg" alt="Card">
  <h3 class="card-title">Card Title</h3>
  <p>Card description goes here.</p>
</div>

.nav-link {
  position: relative;
  color: #333;
  text-decoration: none;
  padding: 10px 15px;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #3498db;
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: #3498db;
}

.nav-link:hover::after {
  width: 100%;
}

Accordion

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion.open .accordion-content {
  max-height: 500px; /* Should be larger than actual content */
}

Loading Spinner

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  transition: transform 0.01s linear;
}

/* Would need JavaScript or animation for continuous rotation */

Transitionable Properties

Not all CSS properties can be transitioned. Here are commonly transitioned properties:

Layout:

width, height, padding, margin
top, right, bottom, left

Visual:

background-color, color
opacity
border-color, border-width
box-shadow

Transform:

transform (scale, rotate, translate, skew)

Text:

font-size
letter-spacing
line-height

Performance Considerations

Performance Tips

Best performance: transform and opacity (GPU-accelerated)
Good performance: color, background-color
Avoid: width, height, margin, padding (cause reflow)
Use transform: scale() instead of animating width/height
Use transform: translate() instead of animating top/left
Keep transitions under 300-400ms for best UX

Timing Function Comparison

/* Visual comparison of timing functions */
.ease { transition: transform 1s ease; }
.linear { transition: transform 1s linear; }
.ease-in { transition: transform 1s ease-in; }
.ease-out { transition: transform 1s ease-out; }
.ease-in-out { transition: transform 1s ease-in-out; }

Combining with JavaScript

<style>
  .modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .modal.show {
    opacity: 1;
    visibility: visible;
  }
</style>

<script>
  const modal = document.querySelector('.modal');
  const button = document.querySelector('.open-modal');
  
  button.addEventListener('click', () => {
    modal.classList.add('show');
  });
</script>

Best Practices

Transition Best Practices

Use transitions for subtle, enhancing effects
Keep durations between 200-400ms for most interactions
Use ease-out for entering elements (feels snappy)
Use ease-in for exiting elements (feels natural)
Use ease-in-out for middle-of-action transitions
Transition only the properties that change
Consider accessibility - some users prefer reduced motion
Test on different devices and browsers
Use transition: all sparingly (performance)

Reduced Motion Preference

Respect user preferences for reduced motion:

.element {
  transition: all 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

Common Patterns

Smooth Color Transition

.link {
  color: #333;
  transition: color 0.2s ease;
}

.link:hover {
  color: #3498db;
}

Scale on Hover

.image {
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.05);
}

Slide In from Side

.sidebar {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.sidebar.open {
  transform: translateX(0);
}

Transitions are powerful tools for creating smooth, professional interactions. Master them to significantly improve your website's user experience!

CSS Transitions

On this page

CSS Transitions

On this page