Understanding CSS Transitions

The CSS transition: property is actually a shorthand property used to define up to 4 different transition values.
In its short-hand syntax, it looks like this:

CSS

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

As you can see there are four different properties that can be defined. Each property defines a different property of the transition. Separated into longhand format, the four properties look like this:

CSS

/* Defines duration of the transition */
transition-duration: value in seconds[s] or value in milliseconds [ms];

/* Defines transition delay time */
transition-delay: value in seconds[s] or value in milliseconds [ms];

/* Defines the CSS property of the subject to be transitioned */
transition-property: [CSS property];

/* Defines a timing curve */
transition-timing-function: [value] or [cubic-bezier(n,n,n,n)];

---

Transition Timing

Before we look at transitioning different properties, let’s take a look at the timing value. The transition-timing-function: defines how the transition will behave throughout the duration of a given transition. Values can be entered as defaults – ease, ease-in, ease-out, ease-in-out or custom cubic- cubic-bezier().
To help better understand transition timing visually, bellow is a CodePen I’ve made showcasing the different timing values. In the example below, we are transitioning a transform:translate() property over a duration of 1 second. The only property that changes between the different examples are the transition-timing-function: values.
Using the ease value as an example, the CSS for the example looks like this:

CSS

/* Static State */
.pink-bullet {
transition: transform 1s ease;
}

/* Play State */
.pink-bullet .play {
transform: translate(400px, 0);
}

See the Pen nAvie by Abhishek (@abhibagul) on CodePen.

---

Transition Durations

Now let’s take a look at how different values of transition-duration: can affect transitions. In the example below, I’ve added an input slider that lets you change the transition-duration: of each timing function. Note how when you change the transition duration to a longer time-frame, the timing-function values are emphasised.

See the Pen lzwLs by Abhishek (@abhibagul) on CodePen.

---

Transition Property

The transition-propery: lets you animate different CSS properties and values like color:, font-size: or background: values for example. If nothing is entered, the transition-property: will be set to transition all CSS properties that change unless specified otherwise. Note that we can also set the property value to all manually.
Keep in mind that some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable.
Let’s take a look at an example. The demo below transitions the background from pink to green. The CSS looks like this:

CSS

.box {
height:100px;
width:100px;
background:#ee2a7b;
transition: background 1s ease;

}
.box:hover {
background:#2bb673;
}

See the Pen vfBnj by Abhishek (@abhibagul) on CodePen.

---

Multiple Properties

Now let’s look at transitioning two properties at different timings and durations. In the example below we are transitioning both the border-radius: property and the background: color property. The CSS looks like this:

CSS

.box {
background:#ee2a7b;
transition: background 1s ease, border-radius 2s ease-in-out;
}
.box:hover {
background:#2bb673;
border-radius:50px;
}

Note how the box’s border-radius finishes transitioning 1s after it has changed color.

See the Pen xcynf by Abhishek (@abhibagul) on CodePen.

---

Transitioning Pseudo vs Element

When using the :hover pseudo, the transition: property can have different effects depending on what element state its on.
In the example below, note how when the mouse is moved over the box the transition occurs, but when it’s moved off the color-change is instant. This is because the transition is set on the :hover pseudo. If you wanted it to transition both on and off hovering, you would set the transition only on its default styling and not the :hover pseudo. The toggle button shows the difference between the two.

See the Pen xHoAy by Abhishek (@abhibagul) on CodePen.

---

Adding Classes With JavaScript

When adding classes with JavaScript, the placing of the transition: property has a similar effect as when using a :hover pseudo.
If the transition: is on the class being added, the transition effect will only occur when that happens (not when it’s removed). On the other hand, when the transition: is on the element’s default styling and not on the class being added (or both), the effect will happen both when it’s added and removed. The demo below demonstrates this relationship.

See the Pen nwiGt by Abhishek (@abhibagul) on CodePen.

---

Vendor Prefixing

Lastly, don’t forget to vendor prefix things:

CSS

.example {
-webkit-transition: background .5s ease-in 1s;
-moz-transition: background .5s ease-in 1s;
-o-transition: background .5s ease-in 1s;
transition: background .5s ease-in 1s;
}