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.

CSS Transitions

Contents

Why use CSS Transitions

CSS Placement

CSS Transitions or CSS Animations

A Basic CSS Transition

CSS Transitions

CSS Transform

Activating a CSS Transition

CSS Shorthand for Transitions

Start Animating!