Computed value vs. specified value in CSS animations

According to MDN:

If from/0% or to/100% is not specified, the browser starts or finishes the animation using the computed values of all attributes.

In the following example, the height property computed value is 0px:

div#parent {
  width: 100px;
  height: 100px;
  outline: 1px solid teal;
}

div#child {
  background: tan;
  animation: lengthen 2s infinite;
}

@keyframes lengthen {
  to {
    height: 100px;
  }
}
<div id="parent">
  <div id="child"></div>
</div>

Demo

But the browser uses height: auto;, which is the element specified value, and that’s why the animation doesn’t work.

Here’s something similar on the spec:

If a 0% or from keyframe is not specified, then the user agent constructs a 0% keyframe using the computed values of the properties being animated. If a 100% or to keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.

But if the browser actually added from {height: 0px;}, which is the computed value, then the animation would work properly. What am I missing?

The simple fact is that animations will not work from ‘auto’ values as auto values depend on a lot of other things which would make transitions and animations very expensive. If you say height zero then the browser accepts that and off it goes.

It is unlikely that transition or animation to auto will be implemented any day soon (unfortunately because that’s usually what you want :))

Thanks for the answer! :slight_smile:

Actually I knew that. Sorry if my question wasn’t clear! Here’s what I wonder: isn’t it more accurate to use specified value instead of computed value in the above-mentioned documentation?

Not sure what you are getting at but the browser always relies on a computed value in order to do its work. It works that out from the specified value and turns it into a computed value.

The problem with transitions is that auto values are too awkward to use although I believe the specs do not emplicitly deny their use. I believe the browser takes the simpler approach of using the absolute value which can be converted to computed values without any calculation needed at all.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.