It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

CSS Transition Possibilities: Make Your CSS Designs Come to Life

Reading time 3 min
Published Nov 22, 2016
Updated Oct 2, 2019

TL;DR – CSS transitions animate properties, set when such animations begin, how long they last, and their speed (for instance, slow at the beginning, fast at the end).

Creating Animations With CSS Transitions

CSS transitions create an animation effect when the styling properties of HTML elements change. The shift between one block of properties to another does not happen suddenly but over a period of time.

This example of CSS3 transitions the opacity property. The <div> element is solid at first. Once you hover over the element, the opacity changes to 0.5.

Example
div {
 width: 200px;
 height: 200px;
 background: #5d088e;
 color: white;
 padding: 5px;
 opacity: 1;
 -webkit-transition: opacity 5s; /* Safari browser */
 transition: opacity 5s;
}

div:hover {
 opacity: 0.5;
}
Example

div {
    width: 200px;
    height: 200px;
    background: #5d088e;
    color: white;
    padding: 5px;
    -webkit-transition: width 5s; /* Safari browser */
    transition: width 5s;
}
div:hover {
    width: 500px;
}
  • In this example, we have a 200px * 200px purple <div> element.
  • The <div> element also has a transition effect specified with the width property.
  • The duration of the effect is five seconds.
  • The transition happens when the width property starts changing its width.
  • The new width property value triggers when you hover over the element.

The transition Shorthand

The transition CSS shorthand can set four properties in one declaration:

Property Description
transition-property It sets one or multiple properties to have a transition effect. For instance, it can be background-color or outline-offset.
transition-duration It indicates how long should the transition last.
transition-timing-function It can change the speed of the transition over its duration. For instance, it can ease-in or ease-out.
transition-delay It delays the start of the transition.

In this example, we define individual properties one by one by using longhands:

Example
div {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0.5s;
}

In this example, the transition shorthand defines all available properties in one declaration:

Example
div {
    transition: width 1s ease 1s;
}

You can also specify several CSS transitions in one declaration block.

This example makes CSS transition multiple properties: both height and width (duration of height - 4 seconds, while width - 2 seconds):

Example
div {
    -webkit-transition: width 2s, height 4s; /* For Safari */
    transition: width 2s, height 4s;
}

Speed Curve

The transition-timing-function property defines the speed curve of the animation. You can decide if the CSS transition is faster or slower at the beginning, middle, end and so on.

Value Description
ease A transition is slow at the beginning, becomes fast in the middle, then ends slowly.
linear The speed remains the same throughout the whole transition.
ease-in A transition starts slowly and then becomes faster.
ease-in-out A transition starts and ends slowly.
cubic-bezier(n,n,n,n) A transition's speed curve is specifically defined by you.

This example shows different speed curves:

Example
#div1 {transition-timing-function: ease;}
#div2 {transition-timing-function: linear;}
#div3 {transition-timing-function: ease-out;}
#div4 {transition-timing-function: ease-in;}
#div5 {transition-timing-function: ease-in-out;}

Delay Effect

CSS3 transition-delay determines whether some time should pass before the transition effect takes place. The property has seconds as values.

In this example, there is 1-second delay before the CSS transition happens:

Example
div {
    -webkit-transition-delay: 1s; /* For Safari */
    transition-delay: 1s;
}

Transition and Transformation

CSS transform controls elements by making them rotate, skew, etc. However, transform does not work without the CSS transition. Therefore, to create a rotating element, follow this example:

Example
div {
    -webkit-transition: width 5s, height 5s, -webkit-transform 5s; /* For Safari */
    transition: width 5s, height 5s, transform 5s;
}

CSS Transition: Useful Tips

  • Not all CSS properties are animatable. Check this link for a full list of properties that the CSS transition property accepts.
  • The use of CSS transitions can save beginners from having to use JavaScript to create simple animations.