CSS Documentation

CSS Transitions

Menu

CSS Transitions

CSS transitions allow you to change property values smoothly, over a given duration. They provide a way to control animation speed when changing CSS properties.

Transition Properties

  • transition-property: Specifies the name of the CSS property the transition effect is for.
  • transition-duration: Specifies how many seconds or milliseconds the transition effect takes to complete.
  • transition-timing-function: Specifies the speed curve of the transition effect.
  • transition-delay: Defines when the transition effect will start.
  • transition: A shorthand property for setting the four transition properties in a single property.

Basic Syntax

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

Examples

Simple Transition

.button {
ㅤbackground-color: blue;
ㅤtransition: background-color 0.3s ease;
}

.button:hover {
ㅤbackground-color: red;
}

Multiple Properties

.box {
ㅤwidth: 100px;
ㅤheight: 100px;
ㅤbackground-color: blue;
ㅤtransition: width 0.5s, height 0.5s, background-color 0.5s;
}

.box:hover {
ㅤwidth: 200px;
ㅤheight: 200px;
ㅤbackground-color: red;
}

Timing Functions

CSS provides several built-in timing functions:

  • ease: Slow start, then fast, then end slowly (default)
  • linear: Same speed from start to end
  • ease-in: Slow start
  • ease-out: Slow end
  • ease-in-out: Slow start and end
  • cubic-bezier(n,n,n,n): Define your own values in a cubic-bezier function

Best Practices

  • Use transitions for subtle animations that enhance user experience.
  • Keep transition durations short (usually between 0.2s and 0.5s) for better responsiveness.
  • Be consistent with your transitions throughout your website or application.
  • Test your transitions on different devices to ensure smooth performance.
  • Use transitions in combination with transforms for better performance.

Browser Support

CSS transitions are well-supported in modern browsers. However, for older browsers, it's a good practice to provide fallbacks or use vendor prefixes when necessary.

CSS transitions are a powerful tool for creating smooth, engaging user interfaces. When used appropriately, they can significantly enhance the user experience of your web applications.