CSS Transition Possibilities: Make Your CSS Designs Come to Life

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.

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;
}

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:

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

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:

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):

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.

This example shows different speed curves:

#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:

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:

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.