An Introductory Guide to CSS Transitions

CSS transitions are a simple and effective way to create animations in CSS. By changing the value of a property, you can instruct CSS to smoothly transition it according to specific parameters, ultimately reaching a final state.

Introduction to CSS Transitions

CSS transitions offer a straightforward approach to animating elements in CSS. In a transition, you modify the value of a property and gradually change it based on specified parameters, resulting in a smooth animation. The core properties that define CSS transitions are as follows:

transition-property: Determines which CSS property should transition.
transition-duration: Specifies the duration of the transition.
transition-timing-function: Sets the timing function used for the animation. Common values include linear and ease, with ease being the default.
transition-delay: Optional parameter indicating the number of seconds to wait before initiating the animation.

To simplify the process, the transition property provides a convenient shorthand:

1
2
3

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

Example of a CSS Transition

Here’s an example of implementing a CSS transition:

.one,
.three {
  background: rgba(142, 92, 205, 0.75);
  transition: background 1s ease-in;
}

.two,
.four {
  background: rgba(236, 252, 100, 0.75);
}

.circle:hover {
  background: rgba(142, 92, 205, 0.25); /* lighter */
}

You can view the example on Glitch. When hovering over the .one and .three elements (the purple circles), a transition animation smoothly changes the background color. In contrast, the yellow circles (.two and .four) do not have the transition property defined and hence lack any transition animation.

Transition Timing Function Values

The transition-timing-function property allows you to define the acceleration curve of the transition. Some common values for this property include:

linear
ease
ease-in
ease-out
ease-in-out

To see these timing functions in action, refer to this Glitch example. If you need a completely custom timing function, you can utilize cubic bezier curves. Although this is a more advanced technique, the previously mentioned functions are built using bezier curves and offer convenient names for common scenarios.

CSS Transitions in Browser DevTools

Browser DevTools provide a valuable way to visualize CSS transitions. Here are examples from two popular browsers:

Chrome DevTools:
Firefox DevTools:

These panels in the DevTools enable live editing of transitions and allow for experimentation directly on the page, eliminating the need for code reloading.

Which Properties You Can Animate Using CSS Transitions

CSS transitions support a wide range of CSS properties for animation. The following is an extensive list:

(List of properties)

(Note: Unfortunately, due to the format of the output, I am unable to include the list of properties here. However, you can find the full list in the original blog post.)

By leveraging CSS transitions, you can animate various properties such as background, border, color, font, grid, opacity, padding, transform, and many others.