CSS Transitions

CSS3 introduced the ability to animate changes to CSS properties overtime using CSS only. Before CSS3, such transitions could only be done using JavaScript. A major benefit of using CSS transitions is improved page loading speeds since CSS loads before JavaScript.

CSS transitions are used to alter the appearance or behavior of an element whenever there is a change of state for example a mouse click, focus or active state, or any change to the element

There are four CSS transition related properties which are transition-property, transition-duration, transition-timing-function, and transition-delay.

Not all of the properties are required to achieve a transition. However you must always specify the transition-duration property, otherwise the transition will not take effect since the duration will be 0.

transition-property property

Specifies the name of the CSS property the transition effect is for.

If multiple properties need to be transitioned they may be comma separated within the transition-property value.  A value of "all” may be used to transition all properties of a given element.

transition-duration property

This sets the duration of time which a transition takes from start to end and can take on timing values of seconds (s) and milliseconds (ms). These timing values can also be fractional for example .2s.

When transitioning multiple properties you can set multiple durations, one for each property in their respective order separated by commas.

transition-timing-function property

Is used to set the speed in which a transition will move. Knowing the duration from the transition-duration property a transition can have multiple speeds within a single duration.

The transition-timing-function property can take on values of;

  • ease – this is the default value and defines a transition effect with a slow start, then speeds up in the middle and slows down towards the end.
  • linear – identifies a transition moving with a constant speed from one state to another, that is, the transition effect has the same speed from start to end.
  • ease-in – the transition starts slowly and then speeds up as it ends.
  • ease-out – the transition starts quickly and goes on slowing down as it ends.
  • ease-in-out – transition starts slowly, speeds up in the middle and slows down again towards the end.
  • cubic-bezier(n,n,n,n) – lets you define your own values in a cubic-bezier function.

transition-delay property

This delay sets a time value in seconds or milliseconds specifying how long a transition should be stalled before executing. For example to leave a 1 second delay before the transition starts, we use; transition-delay: 1s;

To delay numerous transitions, each delay can be declared as comma separated values.

The example below shows how different transition properties can be used to alter the behavior of a given element.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS Transitions</title>
	<style> 
		div {
		  width: 80px;
		  height: 80px;
		  border-radius: 0;
		  background: #76BFC4;
		  transition-property: width, border-radius;
		  transition-duration: 3s, 2s;
		  transition-timing-function: ease-in;
		}

		div:hover {
		  width: 200px;
		  border-radius: 0 50px 50px 0;
		}
	</style>
</head>
<body>
     <p>Hover over the div element below, to see the transition effect:</p>
      <div></div>
</body>
</html>

Output

CSS Transitions

Hover over the div element below, to see the transition effect:

From the output, you observe the change in the width and border-radius of the element when you hover over it. This is achieved using the transition-property, transition-duration and transition-timing-function properties.

transition property

This is a shorthand property capable of supporting all other different properties and values in the order of transition-property, transition-duration, transition-timing-function, and transition-delay respectively.

Syntax

transition: transition-property transition-duration transition-timing-function transition-delay;

No commas are placed between the values unless you are identifying numerous transitions.

The example below demonstrates how the transition property can be used to support a number of transitions.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS Transitions</title>
	<style> 
div {
  width: 80px;
  height: 80px;
  border-radius:0;
  background: red;
  transition: width 2s, height 4s, border-radius 4s;
}

div:hover {
  width: 100px;
  height: 100px;
  border-radius:50%;
}
</style>
</head>
<body>
     <p>Hover over the div element below, to see the transition effect:</p>

      <div></div>
</body>
</html>

Output

Hover over the div element below, to see the transition effect:

From the output above, when you hover over the element, it changes from a square to a circle because its width, height and border-radius have been altered using the transition property.