CSS Transitions

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. Here is a simple example that transitions the background color of a

element on :hover: and Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser.CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.

How to Use CSS Transitions?

To create a transition effect, you must specify two things:

  • the CSS property you want to add an effect to
  • the duration of the effect

CSS3 Transitions are a presentational effect which allow property changes in CSS values, such as those that may be defined to occur on :hover or :focus, to occur smoothly over a specified duration – rather than happening instantaneously as is the normal behaviour.

Transition effects can be applied to a wide variety of CSS properties, including background-color, width, height, opacity, and many more. Keep reading for further details of supported properties.

At present the CSS3 Transitions module is at the working draft stage of development, and as such elements of the specification and syntax could still be liable to change. Although browser support is relatively widespread, for the time being you’ll need to use several vendor prefixes in your code for a cross-browser solution.

Example -

Change Several Property Values

The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:

Multiple animated properties


The transition-timing-function property, normally used as part of transition shorthand, is used to define a function that describes how a transition will proceed over its duration, allowing a transition to change speed during its course.

The predefined keyword values allowed are:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end

These timing functions are commonly called easing functions, and can be defined using a predefined keyword value, a stepping function, or a cubic Bézier curve.

Delay the Transition Effect

The transition-delay property is used to specify the amount of time to wait before a transition effect is animated.

It allows a transition effect to start after some amount of time from when it is applied. A value of ‘0s’ means that the transition will start as soon as the property that is being transitioned is changed. A value other than zero, specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.

Transition + Transformation

CSS Transition Properties

The following table lists all the CSS transition properties:

transitionA shorthand property for setting the four transition properties into a single property
transition-delaySpecifies a delay (in seconds) for the transition effect
transition-durationSpecifies how many seconds or milliseconds a transition effect takes to complete
transition-propertySpecifies the name of the CSS property the transition effect is for
transition-timing-functionSpecifies the speed curve of the transition effect