[css-animations-2] Added animation-delay-start/end and made animation-delay a shorthand (#14167)

* Added -delay-start/end and made -delay a shorthand

* Add a note about backward compat of animation-delay with a single value

Author: ydaniv

css-animations-2/Overview.bs

@@ -69,6 +69,7 @@ spec:web-animations-1; type:dfn;
     text:play state
     text:playback direction
     text:start delay
+    text:end delay
     text:target element
     text:unresolved
 spec:web-animations-2; type:dfn;
@@ -530,10 +531,79 @@ The above requirements do not apply
 if the animation's play state is being overridden by the Web Animations API
 as described in [[#animations]].
 
-## The 'animation-delay' property ## {#animation-delay}
+## The 'animation-delay-start' property ## {#animation-delay-start}
 
-The 'animation-delay' property specifies the [=start delay=]
-of the animation's associated [=animation effect=].
+  The 'animation-delay-start' property specifies the [=start delay=] of the
+  animation's associated [=animation effect=], which
+  defines when the animation will start. It allows an animation
+  to begin execution some time after it is applied,
+  or to appear to have begun execution some time <em>before</em> it is applied.
+
+  <pre class='propdef'>
+  Name: animation-delay-start
+  Value: <<time>>#
+  Initial: 0s
+  Applies to: all elements
+  Inherited: no
+  Animation type: not animatable
+  Percentages: N/A
+  Computed value: list, each item a duration
+  Canonical order: per grammar
+  </pre>
+
+  <dl>
+    <dt><dfn value for=animation-delay-start><<time>></dfn>
+    <dd>
+      The <<time>> defines how long of a delay there is between the start of the animation
+      (when the animation is applied to the element via these properties)
+      and when it begins executing.
+      A delay of ''0s'' (the initial value) means that the animation will execute as soon as it is applied.
+
+      A negative delay is <strong>valid</strong>.
+      Similar to a delay of ''0s'', it means that the animation executes immediately,
+      but is automatically progressed by the absolute value of the delay,
+      as if the animation had started the specified time in the past,
+      and so it appears to start partway through its [=active duration=].
+      If an animation's keyframes have an implied starting value,
+      the values are taken from the time the animation starts,
+      not some time in the past.
+  </dl>
+
+## The 'animation-delay-end' property ## {#animation-delay-end}
+
+  The 'animation-delay-end' property specifies the [=end delay=] of the
+  animation's associated [=animation effect=], which
+  defines when the animation will start when it is reversed.
+
+  <pre class='propdef'>
+  Name: animation-delay-end
+  Value: <<time [0s,∞]>>#
+  Initial: 0s
+  Applies to: all elements
+  Inherited: no
+  Animation type: not animatable
+  Percentages: N/A
+  Computed value: list, each item a duration
+  Canonical order: per grammar
+  </pre>
+
+  Issue: Should animation-delay-end support negative values? If so, what would it mean?
+
+  Issue: Should animation-delay-end be added to the animation shorthand?
+
+## The 'animation-delay' shorthand ## {#animation-delay}
+
+  <pre class="propdef shorthand">
+    Name: animation-delay
+    Value: [ <<'animation-delay-start'>> <<'animation-delay-end'>>? ]#
+  </pre>
+
+  The 'animation-delay' property is a [=shorthand property|shorthand=]
+  that sets 'animation-delay-start' and 'animation-delay-end'
+  together in a single declaration. Specifying a single value will
+  set the 'animation-delay-start' to that value, and will not affect
+  the  value of 'animation-delay-end', for backward compatibility with
+  the 'animation-delay' previous longhand behavior.
 
 ## The 'animation-fill-mode' property ## {#animation-fill-mode}
 
@@ -557,7 +627,7 @@ Animation type: not animatable
 Canonical order: per grammar
 </pre>
 
-<span class=prod><dfn>&lt;single-animation-composition></dfn> = replace | add | accumulate</span>
+<span class=prod><dfn type>&lt;single-animation-composition></dfn> = replace | add | accumulate</span>
 
 The values of 'animation-composition' have the meaning defined for the
 corresponding values of the <a>composite operation</a> defined in Web
@@ -596,9 +666,9 @@ keyframe specifying each property.
   </pre>
 
   If these two animations are applied to the same element, normally only
-  one animation would apply, but by specifying ''add'' as the
-  'animation-composition' on the second animation, the result of the two
-  animations will be combined.
+  one animation would apply, but by specifying ''animation-composition/add''
+  as the 'animation-composition' on the second animation, the result of
+  the two animations will be combined.
 
   Since CSS Transitions [[CSS3-TRANSITIONS]] have a lower composite
   order, it is possible to use 'animation-composition' to combine CSS
@@ -658,7 +728,7 @@ Animation Type: not animatable
 </pre>
 
 <pre class=prod>
-<dfn>&lt;single-animation-timeline></dfn> = auto | none | <<dashed-ident>> | <<scroll()>> | <<view()>>
+<dfn type>&lt;single-animation-timeline></dfn> = auto | none | <<dashed-ident>> | <<scroll()>> | <<view()>>
 </pre>
 
 The 'animation-timeline' property is similar to properties like 'animation-name'
@@ -713,7 +783,7 @@ to the simultaneously-applied timeline specified in 'animation-timeline'.
 
 The 'animation' shorthand property syntax is as follows:
 
-<span class=prod><dfn>&lt;single-animation></dfn> = <<'animation-duration'>> || <<easing-function>> || <<'animation-delay'>> || <<single-animation-iteration-count>> || <<single-animation-direction>> || <<single-animation-fill-mode>> || <<single-animation-play-state>> || [ none | <<keyframes-name>> ] || <<single-animation-timeline>></span>
+<span class=prod><dfn type>&lt;single-animation></dfn> = <<'animation-duration'>> || <<easing-function>> || <<'animation-delay-start'>> || <<single-animation-iteration-count>> || <<single-animation-direction>> || <<single-animation-fill-mode>> || <<single-animation-play-state>> || [ none | <<keyframes-name>> ] || <<single-animation-timeline>></span>
 
 
 <!-- Big Text: events
@@ -995,7 +1065,7 @@ console.log(anim.playState); // Should be 'running'.
   </li>
   <li>Defined that event triggers can be defined to have enter/exit pairs, like timelines.</li>
   <li>Separated trigger concept from trigger instance</li>
-  <li>Changed initial value of the exit ranges to 'auto', to match the start ranges
+  <li>Changed initial value of the exit ranges to auto, to match the start ranges
   </li>
   <li>Changed "animation-trigger-behavior" to "animation-trigger" and largely rewrote the definition
     (<a href="https://github.com/w3c/csswg-drafts/pull/13009">PR 13009</a>)