[scroll-animations] Add css syntax for element-based offset (#5264)

Add css syntax to for element-based offsets. Fixes #4337.

The element-based syntax is simply applied when the value starts with  `selector(#id)` with the following characteristics: 
 - `selector( <<id-selector>> )` is required and is expected to be the first value.
 - both edge and threshold are optional can can be provided in any order.

I followed some of the ideas mentioned by @tabatkins in #4348 to to get to a more ergonomic  css function syntax.  In particular there is no comma and the optional params can be in any order. Note that unlike  #4348 we are not adding a function syntax.

Author: majido

scroll-animations-1/Overview.bs

@@ -666,7 +666,7 @@ if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
   });
 
   const slideIn = target.animate({
-      transform: ['translateX(0)',q 'translateX(50vw)'],
+      transform: ['translateX(0)', 'translateX(50vw)'],
       opacity: [0, 1]
     }, {
       timeline:timeline,
@@ -676,6 +676,37 @@ if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
 }
 </pre>
 
+The same logic can be done in CSS markup:
+<pre class="lang-css">
+@media (prefers-reduced-motion: no-preference) {
+
+  @keyframes slide-in {
+    from {
+      transform: translateX(0);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateX(50vw);
+      opacity: 1;
+    }
+  }
+
+  @scroll-timeline image-in-scrollport {
+    source: selector(#container);
+    start: selector(#image) end;
+    end: selector(#image) start;
+  }
+
+  #target {
+    animation-name: slide-in;
+    animation-duration: 1s;
+    animation-timeline: image-in-scrollport;
+  }
+
+}
+</pre>
+
 
 </div>
 
@@ -843,7 +874,7 @@ Issue(5167): This will likely change in the future.
 <pre class='descdef'>
   Name: source
   For: @scroll-timeline
-  Value: selector(<<id-selector>>) | auto | none
+  Value: selector( <<id-selector>> ) | auto | none
   Initial: auto
 </pre>
 
@@ -883,17 +914,44 @@ instead of document's scrolling Element for <code>auto</code>.
 <pre class='descdef'>
   Name: start
   For: @scroll-timeline
-  Value: auto | <<length-percentage>>
+  Value: <<scroll-timeline-offset>>
   Initial: auto
 </pre>
 
 'start' descriptor determines the scroll timeline's {{start}}.
 
+[=Scroll timeline offsets=] in CSS are represented by the
+<<scroll-timeline-offset>> type:
+
+<pre>
+<dfn>&lt;scroll-timeline-offset></dfn> = auto | <<length-percentage>> | <<element-offset>>
+<dfn>&lt;element-offset></dfn> = selector( <<id-selector>> ) [<<element-offset-edge>> || <<number>>]?
+<dfn>&lt;element-offset-edge></dfn> = start | end
+</pre>
+
+The offset type depends on the value of <<scroll-timeline-offset>> per
+following:
+<div class="switch">
+:   If value is "auto" or of type <<length-percentage>>
+::  The [=scroll timeline offset=] is a [=container-based offset=] with the same
+    value.
+
+:   If value is of type <<element-offset>>
+::  The [=scroll timeline offset=] is an [=element-based offset=] with the
+    following member values:
+      *  {{ElementBasedOffset/target}} is the element identified by
+          <<id-selector>>.
+      * {{ElementBasedOffset/edge}} is the optional value of
+        <<element-offset-edge>>. If not provided it defaults to "start".
+      * {{ElementBasedOffset/threshold}} is the optional value <<number>>. If
+        not provided it defaults to 0.
+
+</div>
 
 <pre class='descdef'>
   Name: end
   For: @scroll-timeline
-  Value: auto | <<length-percentage>>
+  Value: <<scroll-timeline-offset>>
   Initial: auto
 </pre>