CSS Transitions

Why use CSS Transitions

CSS Transitions are a unique form of animation specific for web pages. A web page is made up of elements, such as paragraphs and images, and CSS transitions allow you to animate their states from one to another.

To animate, for our purposes, means to change element properties over time. Lots of things can change. Not just movement, but also colors and sizes. Controlling the changes of these types of properties over time is what CSS Transitions is about.

What makes CSS Transitions special, is that they don't necessarily require JavaScript or general programming knowledge. CSS simply consists of a set of statements, or properties. These properties give the starting and end points, then the transitions specify how long it should take to move between the property values smoothly.

Animating element transitions on the page using CSS is done by listing off some CSS properties. It's actually quite simple and somewhat ingenius.

Note: This article is going to assume you already have some background knowledge off HTML/CSS and general web page development.

CSS Placement

To start with, CSS needs to be accessible to the browser when your page loads. This is done in one of two places, either in the HTML file itself, or in a separate file. Specifying your CSS in the html file is convenient, especially for testing purposes, but keeping the CSS in a separate file is beneficial for posting online in production.

Putting CSS code in another file is straight forward as the file itself is a basic text file. You tell your HTML page to call the file using syntax similar to below.

<head>
  <link rel="stylesheet" href="/css/styles.css">
</head>

As indicated above, the link element belongs inside the head.

For convenience, you can also place CSS code inside the HTML <head> directly, by using the <style> tag.

<head>
  <style>
    .a1 {
        border: 1px solid green;
        background-color: #ffdddd;
        width: 80px;
        height: 80px;
    }
  </style>
</head>

CSS Transitions or CSS Animations

Animating page elements with CSS is done in one of two ways, using animation properties or transition properties. This article is about transition. But what are CSS Animations and how do they differ?

CSS Animations offer more complex animations that are not dependent on user actions like transitions are. CSS animations give you much more control over animations, but they are not as easy to use. One way to think of it is that transitions simply animate the the change of an element from one state to another, and back again. But CSS Animations can manipulate the element in very complex ways - not simple back and forth between states.

From here forth, we'll only be discussing transitions.

A Basic CSS Transition

Below is a simple transition that you can see in action by tapping or mousing over the square. When you touch the element, it will smoothly animate by 72°. When you release the touch, it'll return to its original orientation.

The CSS code used to show this transition is:

			
.a1 {
    border: 1px solid green;
    background-color: #ffdddd;
    width: 80px;
    height: 80px;
    margin: auto;
    transition-property: transform;
    transition-duration: 1s;
    transition-delay: 0s;
}
.a1:hover {
    transform: rotate(72deg);
}
			
			

In the CSS above you'll see 3 key concepts:

  1. Appearance settings
  2. "transition" properties
  3. "hover" then "transform"
1: Appearance
The properties given for .a1 related to basic appearance can all be animated. For our purpose we're not animating any of them this time. They just describe our square.
2: Transition
The transition properties, actually define our animation. We'll go into detail on this a bit later.
3: "hover" then "transform"
hover specifies the user action that triggers a change in the style of the given element. In this case we'll set a new orientation when a user hovers over the element.

CSS Transitions

The transition properties are where the action is. Transition properties indicate how change should happen over time. The transitions are two directional. Each element begins in a state, for example "red". Upon a user action, the state will change to "green". When the user action ends, the state is automatically returned to "red".

Hover over me!

Let's look at some relevant CSS properties.

transition-property: transform;

transition-property specifies to which property the transition values apply. Values for this are things like "top", "background-color", "transform", and most other CSS properties. You can list more than one property and the values given in the remaining transition properties will apply to them as well.

transition-duration: 1s;

transition-duration specifies how long it should take for the given transition to occur. Put another way, how does it take to do.

You can specify time in either seconds or milliseconds, as shown below. Note that you cannot put a space between the time value number and the unit ("s" or "ms").

transition-duration: 1s;
transition-duration: 500ms;

Of course, to determine how fast something moves depends on the standard distance formula, d=vt but flipped so v=d/t. In other words you'll not be adjusting the speed but instead setting the time variable. The larger the time value, the slower the speed and the smaller the time value, the higher the speed.

transition-delay specifies how long to wait before the animation begins. The units of time are same as for duration, seconds (s) or milliseconds (ms).

transition-delay: 1s;
transition-delay: 500ms;

CSS Transform

If you are new to CSS transitions, you might also be new to transform. Transforms are amazing because the bring a lot of power to element rendering. As you can see from the example above, this transform rotated the square an arbitrary distance. 72° in fact.

Transform has a large number of other functions as well. They include: rotate3D, translate, scale, and skew. Many of those include 3D versions and separate versions for each of the axis X, Y, Z. Example: translateX, translateY, translateZ.

Using transform: translateX(20px) will move the element 20 pixels to the right.

Learn more about transform here.

Activating a CSS Transition

Animated transitions have to be triggered by some user action. Often this comes from a mouse action. The examples here use the hover event. In CSS, we change an element when a mouse hovers using the hover "pseudo-class". This is what the code looks like;

			
.a2:hover {
    transform: rotate(72deg);
}
			
			

So the code above means to apply the transform when the mouse is moved onto the .a1 element. But here's the thing,
if the transition properties are not applied to the main element, .a1, with hover, then the animation won't occur. This will cause the element will change instantly to the new orientation described. See below with a mouse hover or tap:


Animated
VS.

Missing "transition" properties

To summarize, the transition properties are responsible for the smooth animation between states, but the change will occur instantly if you just give the new property without transitions being defined.

(sorry about the long "summary" in the paragraph above.)

There are many events that can trigger a transition. Here are some more important ones.

hover
This event occurs when a mouse is rolled over top of the given element. Devices without a mouse, like a phone, may trigger the hover event when the element is touched.

Hover
active
The active event is triggered when a user interacts with an element. For example, hold the mouse button down on an element, or holding a touch on an element.

Active
focus
The focus event is related to the currently active input element of a page. Only one element can have focus at a time When an element receives focus, these properties are active.

Focus

CSS Shorthand for Transitions

There are many properties that can be animated using transitions. They can also be animated simultaneously. CSS provides a shorthand syntax to make it easier to specify all your animation settings using fewer properties.

Transition shorthand looks like this:

div {
    transition: <property> <duration> <delay>;
}

Let's try it below.

.e1 {
    transition: background-color 1s 1s;
}
Mouse over for 1 second delay

Active

Transition shorthand make it much more convenient to describe several animations at once.
Here we'll rotate, change the color, and increase with width. And we'll do it all in once call. We accomplish this by separating the property of each transition with a comma.

.e2 {
    transition: transform 1s 500ms, background-color 2s 0s, width 1s 0s;
}
.e2:hover {
	transform: rotate(90deg);
	background-color: green;
	width: 300px;
}

Each underlined portion above defines a set of values for each given property that will be animated.

Hover

Active

Start Animating!

The best way to learn is by example. Copy the code below to a new page and play around.

			
<html>
<head>
<style>
body { padding-top: 50px }
.a1 {
    border: 1px solid green;
    background-color: #ffdddd;
    width: 80px;
    height: 80px;
    margin: auto;
    transition-property: transform;
    transition-duration: 1s;
    transition-delay: 0s;
}
.a1:hover {
    transform: rotate(72deg);
}
</style>
</head>
<body>
<div style="text-align:center">
    <div class="a1">
        Hover
    </div>
    Mouse over or touch.
</div>
</body>
</html>
			
			

Learn about other types web animation here.

More websites that use SCL for animations and game development: