Animations and Transitions

Introduction

CSS enables you to create animations and transitions with ease.

Animations and transitions:

• enhance the user interface and can make it more engaging.
• can make the site easier to understand and explain what’s happening, such as showing a section based on a user click or moving between pages.
• can also focus the user’s attention and help with context switching.

Be careful when adding animations and transitions. Too many of them can make it hard to focus on what is important to the user. Remember that the styling added should improve the user’s experience of the website.

Animations

To create an animation, choose a name for your animation property and set it to the element you’d like to animate.

In this example, we’re going to make a ball that bounces, so the animation-name we’ve chosen is ‘bounce’. We also need to set the duration of the animation using the animation-duration property.

Once you’ve set the animation-name and duration, you need to set what the animation does. To set what the animation does in CSS, we need to use @keyframes{} and set what happens at various moments in the animation.

	<div class="ball"></div>

	.ball {
	  animation-name: bounce;
	  animation-duration: 5s;
	  position: relative;
	  top: 300px;
	  height: 50px;
	  width: 50px;
	  background: red;
	  border-radius: 50%;
	}
	
	@keyframes bounce {
	  0% {
	    top: 300px;
	  }
	  50% {
	    top: 0px;
	  }
	  100% {
	    top: 300px;
	  }
	}

At 0% of the animation, we want the ball to be at 300px from the top of the page. At 50% of the way through the animation, we want the ball to be at the top of the page. Then, at 100% of the animation, we want the ball to be at 300px from the top again.

You can choose what percentages you use and what styling is applied, but it’s important to see how we use @keyframes to decide what our animation does.

DOCUMENTATION

Read more about @keyframes at the MDN Docs: @keyframes

Animation Properties

DOCUMENTATION

Read more about animation properties at the MDN Docs: Using CSS animations

Transitions

CSS transitions allow you to smooth out changes in the user interface. Unlike animation, they need a trigger to start them. A common trigger in CSS would be a user hovering over an element.

To use a transition on an element, you need to set to which of the properties of the element you’d like the transition to apply. In the code example below, the properties of the .ball element are height, width, background-color and border-radius. These properties can be modified using the CSS transition. You can select all or choose specific properties if you want the transition to only apply to them. Choosing individual properties also allows you to run the transitions on different delays.

	<div class="ball"></div>

	.ball {
	  transition-property: background;
	  transition-duration: 2s;
	  height: 50px;
	  width: 50px;
	  background: red;
	  border-radius: 50%;
	}
	
	.ball:hover {
	  background: blue;
	}

In the code above, the ball will change colour on hover, but instead of a jarring change from red to blue, there is a two seconds transition which will ease the change.

You can’t use a transition on any styling. There needs to be a way of finding middle points for the transition. For example, transitions won’t work on the display property because there’s no middle point; it’s either on or off. If you did want to reveal/hide an element, then you would need to use the opacity property because there, you can transition between 0.5 and 1, for example.

DOCUMENTATION

Read more about CSS transitions at the MDN Docs: Using CSS transitions

Activities

💻 WATCH

The below tutorial video on animations and transitions (13m 28s).

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt the answers before checking them against the answers in the answers branch of the repo.