The Minimum Code for a CSS Transition

Here’s something interesting that you may not have realized about CSS3 transitions. Normally, you’ll see a transition declared something like this:

.example {
  transition: background-color .5s ease-out;
}

Or maybe using longhand, like this:

.example {
  transition-property: background-color;
  transition-duration: .5s;
  transition-timing-function: ease-out;
}

In both cases, we’re explicitly declaring three of the four transition-related properties (leaving out transition-delay).

Can a transition occur with less code than that? Well, yes. Here’s the minimum code required for a transition:

.example {
  transition: 4s;
}

I’m using shorthand in that last example, but the only thing I’ve defined is the transition-duration (the browser always assumes the first time value is the duration).

This is not rocket science, and many of you have probably recognized this, but here’s a CodePen to demonstrate what I’m talking about:

<

p data-height=”400″ data-theme-id=”0″ data-slug-hash=”EDyiA” data-user=”impressivewebs” data-default-tab=”result” class=’codepen’>See the Pen EDyiA by Louis Lazaris (@impressivewebs) on CodePen

The ‘toggle’ button lets you remove/add all the styles that are applied to the single element on the page. When the styles come ‘on’, the transition will occur. If you click to view the CSS, you’ll see that the only value included in the transition shorthand is the duration. The other properties ( transition-property and transition-timing-function) are omitted.

Why Does This Work?

The reason this works is twofold:

1. The initial, or default, value for transition-property is “all”, meaning all animatable properties applied to the element will transition when a relevant state change occurs.
2. The initial value for transition-timing-function is “ease”.

Due to how CSS works, this means that those two properties will have a value that is assumed by the browser by default — even if you don’t declare them.

It might seem strange that the browser automatically computes those two properties in such a specific way, rather than using a generic “none” or something similar. But for those specific properties it doesn’t matter — because without a specified transition-duration (which defaults to “0s”), those omitted properties are rendered ineffective.

Summary

As shown in the CodePen embed, this is actually a very easy way to make all the elements on a page animate when the page loads. For example, if you go to the full page view of that demo, you’ll see that the element will transition into place on page load, rather than appearing instantly at full size. Of course, in most cases, you’ll want to take full control of such animations, for performance and UX reasons, rather than allowing “all” properties to animate by default like that.

Again, this is not a super-complex tip, but it could be something that many CSS developers haven’t picked up on. For many CSS properties the initial values often go unnoticed, so keep this in mind.

As a side point, if you ever want quick access to the initial value for any CSS property, you can use my CSS Values reference site. The first value listed for each property is the initial, or default, value for that property.