CODEWITHSUNDEEP
csscss-animationsspecificationscomputed-style
Mori
Mori

Reputation: 6912

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>

enter image description here

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. Isn't it more accurate to use specified value instead of computed value in the above-mentioned documentation?

Upvotes: 0

Views: 363

Answers (2)

cfreear
cfreear

Reputation: 1875

MDN is correct, the initial value of height is actually auto, the "computed" value that browsers show is the value that special keywords and initial values translate to.

Upvotes: 0

Kustolovic
Kustolovic

Reputation: 172

MDN has right, because the computed value of height: auto is height: auto. 0px is the used value.

According to MDN again:

However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage specified values turn into percentage computed values.

Upvotes: 0

Related Questions