[css-animations-2] Add 'auto' as initial value of 'animation-duration'.

#6530

css-animations-2/Overview.bs

@@ -375,8 +375,56 @@ requirement to iterate in reverse.
 
 ## The 'animation-duration' property ## {#animation-duration}
 
-The 'animation-duration' property specifies the [=iteration duration=]
-of the animation's associated [=animation effect=].
+  <pre class='propdef'>
+  Name: animation-duration
+  Value: [ auto | <<time [0s,∞]>> ]#
+  Initial: auto
+  Applies to: all elements
+  Inherited: no
+  Percentages: N/A
+  Computed value: list, each item either a time or the keyword ''animation-duration/auto''
+  Animation type: not animatable
+  Canonical order: per grammar
+  </pre>
+
+  The 'animation-duration' property specifies the [=iteration duration=]
+  of the animation's associated [=animation effect=].
+
+  <dl dfn-for=animation-duration dfn-type=value>
+    <dt><dfn>auto</dfn>
+    <dd>
+      For time-driven animations,
+      equivalent to ''0s''.
+
+      For [=scroll-driven animations=],
+      equivalent to the duration necessary to fill the timeline
+      in consideration of 'animation-range', 'animation-delay', and 'animation-iteration-count'.
+      See [[scroll-animations-1#finite-attachment]].
+
+    <dt><dfn><<time [0s,∞]>></dfn>
+    <dd>
+      For time-driven animations,
+      specifies the length of time that an animation takes to complete one cycle.
+      A negative <<time>> is invalid.
+
+      If the <<time>> is ''0s'', like the initial value,
+      the keyframes of the animation have no effect,
+      but the animation itself still occurs instantaneously.
+      Specifically, start and end events are fired;
+      if 'animation-fill-mode' is set to ''backwards'' or ''both'',
+      the first frame of the animation,
+      as defined by 'animation-direction',
+      will be displayed during the 'animation-delay'.
+      After the 'animation-delay' the last frame of the animation,
+      as defined by 'animation-direction',
+      will be displayed if 'animation-fill-mode' is set to ''forwards'' or ''both''.
+      If 'animation-fill-mode' is set to ''animation-fill-mode/none''
+      the animation will have no visible effect.
+
+      For [=scroll-driven animations=],
+      treated as ''animation-duration/auto''.
+  </dl>
+
 
 ## The 'animation-timing-function' property ## {#animation-timing-function}
 
@@ -575,7 +623,7 @@ the following effects:
 :   <dfn><<view()>></dfn>
 ::  Use the [=view progress timeline=] indicated by the given ''view()'' function.
     See [[scroll-animations-1#view-notation]].
-  </dl>
+    </dl>
 
 
 Issue: Make it easier to use 'animation-name' to select the timeline when
@@ -851,4 +899,4 @@ console.log(anim.playState); // Should be 'running'.
   <li>
     Requirements on pending style changes are described.
   </li>
-</ul>
+</ul>