CSS Transitions

CSS Transitions

Transitions

Transitions in CSS allow you to easily animate elements by changing properties and letting the browser calculate the values in between.

Specifying a transition effect is extremely easy using the transition property.

In our first example, let's create a blank page that when hovered will smoothly animate to a black background:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Transitions</title>
			<style>
				body {
					transition: 1s;
					height: 100vh;
					margin: 0;
				}
				body:hover {
					background-color: black;
				}
			</style>
		</head>
		<body>

		</body>
	</html>
	
About halfway animating between white and black.
About halfway animating between white and black.

That's pretty much it for this effect. The browser animated between white (#FFFFFF) and black (#000000) over a duration of 1 second.

Transition Property

In our example, since we didn't give the browser any specific property to transition, it will transition all properties that are capable of being transitioned.

In most cases, we only want certain properties to transition. To accomplish this, just add the property you want transitioned alongside your duration:

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>Transitions Property</title>
			<style>
				.box {
					transition: height 1s;
					height: 5rem;
					width: 10rem;
					background-color: red;
				}
				.box:hover {
					height: 10rem;
					background-color: blue;
				}
			</style>
		</head>
		<body>
			<div class="box"></div>
		</body>
	</html>
	
Transitioning on a specific property.
Transitioning on a specific property.

In this example we have a box with a set width, height, and background-color, while it has a new value for height and background-color upon hover.

Because we set transition to only occur on height value changes, the box will immediately turn blue on hover, while it will mostly animate it's height.

If you made it transition on background-color instead, you would have a smooth transition from red to blue, while the change in height would be abrupt.

Transition Timing Function

Did you notice that in both examples above, the transitions were smooth? Going from black to white felt smooth, and so did the height change on the box.

This is thanks to the timing function. Rather than just going from value A to value B in a constant acceleration, the browser applies an acceleration curve.

If you want to see the effect without this curve, give it the linear value, which will ensure the values transition at a constant rate.

	
	transition: height 1s linear;
	

The browser uses ease by default, which is what gives it that smoothness, but you have many options at your disposal:

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

Transition Delay

As a final bit of customization for your transitions, you can specify a delay on them. A delay is simply the amount of time you want to elapse before beginning the transition.

Let's say you wanted to delay a transition by 250 milliseconds, the styles would look like this:

	
	transition: height 1s linear 250ms;
	

In the next CSS lesson, take this newly obtained knowledge a step further with CSS animations!