CodeinWP CodeinWP

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

Update: Interestingly, since I am a bit of a Chrome junkie of late, I didn’t realize that the other browsers are handling this slightly differently (as pointed out by Šime Vidas). The other browsers fade the element in, seemingly transitioning its opacity, but not the width/height. My initial reaction is that Chrome’s behaviour is correct, due to what’s explained below regarding initial values.

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.

Update: It turns out, the transition on initial page load is happening only on CodePen likely because CodePen is injecting the styles and creating a new “state”. I misinterpreted this as some sort of default action by the browser itself, animating “all” properties. Nonetheless, the main point here still stands: You need only a duration for a transition to work, but you’ll also need to ensure there are different states defined to transition between.

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.

3 Responses

  1. I recognize that when i use transition with specific property, they work better.
    For example transition:0.5s vs transtions:height 0.5s – first firest with some ms pause, second fires at once (in chrome)

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).