How to Use CSS Transitions & Animations to Highlight Changes

By . in UI/UX. Updated on .

Designers and artists have a long history of experimenting with motion, effects, and different kinds of illusions with the aim of adding an extra layer to their work. The op art movement began to use optical illusions in the 1960s to give the impression of motion.

Since then newer and newer approaches have popped up, such as the recently popular kinetic art that extends the viewer’s perspective by using multidimensional movement. Motion also appeared in computer science with the invention of the first blinking cursor in 1967.

In front-end development DOM elements were usually animated by JavaScript before CSS3 was released, and it’s a method that still works, but the new properties introduced by CSS3 allows us to enhance our designs with different effects and motion in a more intuitive way.

The two main techniques CSS3 offers are transitions and animations. In this post we will take a look at what they are, what is the difference between them, and how you can make use of them.

Transitions

Transitions and animations are both used to visualize changes in the state of an HTML element by modifying one or more of its CSS properties.

The simplest form of state change visualization is altering the colour of a button or a link when it’s hovered on. When it happens, the element gets a slightly different style, which is usually noticed by the viewer as if something have moved on the screen.

Changing CSS properties of a link on hover (or focus, or click) is the oldest and simplest form of transitions, and it existed well before the CSS3 era.

a {
	color: orange;
}
a:hover {
	color: red;
}
a:focus {
	color: blue;
}
a:visited {
	color: green;
}

Transitions are used when an HTML element changes from one predefined state to another. CSS3 introduced new properties that allow more sophisticated visualizations than before, such as timing functions or duration control.

We will take a look at the new CSS properties in the next section, after understanding how animations differ. For now, let’s see the most important things you need to know about transitions.

  1. They always have a beginning and an end state.
  2. The states between the start and end points are implicitly defined by the browser, we can’t change that with CSS.
  3. They require explicit triggering, such as adding a new pseudoclass by CSS, or a new class by jQuery.

You can see a beautiful example of smartly utilized CSS3 transitions below, in which the author reveals hidden information in a way that’s non-intrusive but still steers users’ focus on the new content.

Animations

If we want to visualize state changes with more complicated movements, or if we don’t have an explicit trigger, e.g. if we want to start the effect when the page loads, animations are the way to go.

Animations make it possible to define a more complex path by setting and configuring our own keyframes. Keyframes are intermediate points in the course of the animation, that allows us to change the style of the animated element as many times as we want.

Although CSS3 offers great ways to build sophisticated animations, it’s usually harder to create them than transitions, that’s why there are many great animation libraries out there, which can facilitate our work.

The most important things you need to know about CSS3 animations include:

  1. they don’t require explicit triggering, they can start on page load or when another DOM event takes place in the browser
  2. they can be used in cases when transitions are used, for example when a new class or pseudoclass is added or removed (although it’s a less frequent use case)
  3. they require us to define some keyframes (intermediate states)
  4. we can specify the number, the frequency, and the style of these keyframes

In the example below you can see a cool animated dropdown menu. The animation starts when we click on the button. This is achieved by adding extra classes to the list elements with jQuery when the click event occurs.

These new classes are animated with specified @keyframes rules in the CSS file. The extra classes are removed by jQuery when the user clicks on the button the next time, and the menu becomes hidden again.

CSS Properties and The @keyframes At-Rule

For transitions we can use either the transition shorthand property, or 4 single transition-related properties: transition-property, transition-duration, transition-timing-function, and transition-delay. The shorthand property contains all the single properties in an abbreviated form.

For animations there’s the animation shorthand property at our hands which stands for none less than 8 single animation properties, namely animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

The most important thing with both transitions and animations is that we always need to specify the CSS properties that will be modified during the state change. With transitions it looks like this:

.element {
	background: orange;
	transition-property: background;
	transition-duration: 3s;
	transition-timing-function: ease-in;
}
.element:hover {
	background: red;
}

We specified the background property, because this is what will be changed during the transition.

We can alter more than one CSS property in one transition, in this case the code above would be modified like this: transition-property: background, border;. We can also use the transition-property: all;, if we don’t want to specify each property separately.

We can choose the shorthand transition property as well. If we do so, we always need to pay attention to the proper order of the inner properties (see the syntax in the docs).

.element {
	background: orange;
	transition: background 3s ease-in;
}
.element:hover {
	background: red;
}

If we want to create an animation, we are required to specify the related keyframes. The CSS properties need to be modified in separately defined @keyframes at-rules. Here is an example of how we can do this:

.element {
	position: relative;
	animation-name: slide;
	animation-duration: 3s;
	animation-timing-function: ease-in;
}
@keyframes slide {
	0% {
		left: 0;
	}
	50% {
		left: 200px;
	}
	100% {
		left: 400px;
	}
}

In the example above we created a very simple sliding effect. We defined the animation-name, then bound 3 keyframes to it which we specified in the @keyframes slide { ... } at-rules. The percentages refer to the duration of the animation, so 50% happens at 1.5s in the example.

We could use the shorthand animation property as well, or could define the keyframes with the more simple from {} to {} rule in the following way:

.element {
	position: relative;
	animation: slide 3s ease-in;
}
@keyframes slide {
	from {
		left: 0;
	}
	to {
		left: 400px;
	}
}

The creation of more complex animations is its own form of art, if you are interested, you can read two of our animation tutorials on how to create an advanced marquee, and how to create a bounce effect.

When building transitions and animations, you need to know that not all CSS properties can be animated, so it’s always a good idea to check the property you want to change in the CSS Animatable.

CSS3 animations and transitions worked with vendor prefixes for a long time, which we don’t have to use any more, however the Mozilla Developer Network still recommends to add the -webkit prefix for a while, as the support for Webkit-based browsers only recently achieved stability.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail