CSS Transitions

Default values

When working with transitions, we need to understand how the browser interprets the syntax.

The default value of transition-property or as a value in the shorthand transition is all, which means the transition we apply will affect all properties (that allow it) of the CSS class where we’re indicating it.

.logo {
  transition-property: all;
  transition-duration: 250ms;
  transition-timing-function: ease;
}

.logoJL {
  transition: all 250ms ease;
}

In the code above, both classes do the same thing, but there’s a detail we should consider. If we look at what the default values are for each of these properties, we can see we’re defining values that the browser already has by default.

.logo {
  transition-duration: 250ms;
}

.logoJL {
  transition: 250ms;
}

This code will have exactly the same behavior, even though we haven’t defined values for transition-property and transition-timing-function.

For semantic reasons and later code interpretation, whether by ourselves in the future or by another person, it’s common to (at least) find the transition-property value defined.

Multiple transitions

We’ve already seen this from the first example in the article.

.logo {
  ... transition: width 0.25s, box-shadow 0.25s;
  ...;
}

We’ve defined transitions independently for width and box-shadow. In this case we could have done it with a value of all .25s, it would have the same effect. But doing it separately allows us to define different times, delays, or timing functions for each property.

.logo {
  ... transition-property: width, box-shadow;
  transition-duration: 0.25s, 250ms;
  transition-timing-function: ease, ease-in-out;
  ...;
}

.logoJL {
  ... transition: width 0.25s, box-shadow 0.25s ease-in-out;
  ...;
}

As an example I’ve used units in seconds and milliseconds, to show they can coexist without problems.

In case we define multiple properties, where the number of properties is greater than the number of values in the duration property, it repeats.

In the following code, the values of transition-duration and transition-timing-function will repeat until they match the number of values in transition-property.

.logo {
  ... transition-property: width, box-shadow, color, padding, border-radius;
  transition-duration: 0.25s, 250ms;
  transition-timing-function: ease, ease-in-out;
  ...;
}

Resulting in:

.logo {
  ... transition-property: width, box-shadow, color, padding, border-radius;
  transition-duration: 0.25s, 250ms, 0.25s, 250ms, 0.25s;
  transition-timing-function: ease, ease-in-out, ease, ease-in-out, ease;
  ...;
}

Value order

As the W3C documentation itself indicates, the order of values in the transition property is important. As we’ve seen in the tables above, it tells us <single-transition> = [ none | <single-transition-property> ] || <time> || <timing-function> || <time>. This means the browser expects: none or a property, followed by duration, timing function, and finally delay time.

I’ve been testing various combinations, the browser is intelligent enough to correct errors in order.

.logo {
  transition: ease-in opacity 250ms 3s;
}

In the code above, the browser will be able to interpret the transition even though the values aren’t ordered following the standard. Even if the first time value is negative, it interprets we’re indicating the transition.delay value since we can’t have a negative value in transition-duration. I invite you to try combinations to understand how it works.

How do transitions work internally?

Beyond knowing how to define our transitions to add animations and interactions, we can look at browser code to see how they’re applying what we can see in the W3C specifications, which in fact is documentation for browser developers, let’s be clear.

We’re fortunate to have the source code of most browsers available.

• Chromium the engine used in Google Chrome, Opera and recently by Microsoft’s browser
• Gecko the engine used by Mozilla for Firefox
• WebKit was Chrome and Opera’s engine, but now only Safari uses it

It’s interesting to see code like the following, where we can see exactly how it creates the list of values for a shorthand transition.

const CSSValue* Transition::CSSValueFromComputedStyleInternal(
    const ComputedStyle& style,
    const SVGComputedStyle&,
    const LayoutObject*,
    bool allow_visited_style) const {
  const CSSTransitionData* transition_data = style.Transitions();
  if (transition_data) {
    CSSValueList* transitions_list = CSSValueList::CreateCommaSeparated();
    for (wtf_size_t i = 0; i < transition_data->PropertyList().size(); ++i) {
      CSSValueList* list = CSSValueList::CreateSpaceSeparated();
      list->Append(*ComputedStyleUtils::CreateTransitionPropertyValue(
          transition_data->PropertyList()[i]));
      list->Append(*CSSNumericLiteralValue::Create(
          CSSTimingData::GetRepeated(transition_data->DurationList(), i),
          CSSPrimitiveValue::UnitType::kSeconds));
      list->Append(*ComputedStyleUtils::CreateTimingFunctionValue(
          CSSTimingData::GetRepeated(transition_data->TimingFunctionList(), i)
              .get()));
      list->Append(*CSSNumericLiteralValue::Create(
          CSSTimingData::GetRepeated(transition_data->DelayList(), i),
          CSSPrimitiveValue::UnitType::kSeconds));
      transitions_list->Append(*list);
    }
    return transitions_list;
  }

  CSSValueList* list = CSSValueList::CreateSpaceSeparated();
  // transition-property default value.
  list->Append(*CSSIdentifierValue::Create(CSSValueID::kAll));
  list->Append(
      *CSSNumericLiteralValue::Create(CSSTransitionData::InitialDuration(),
                                      CSSPrimitiveValue::UnitType::kSeconds));
  list->Append(*ComputedStyleUtils::CreateTimingFunctionValue(
      CSSTransitionData::InitialTimingFunction().get()));
  list->Append(
      *CSSNumericLiteralValue::Create(CSSTransitionData::InitialDelay(),
                                      CSSPrimitiveValue::UnitType::kSeconds));
  return list;
}