[web-animations-1][editorial] Just use double quotes for JS string values.

Author: tabatkins

web-animations-1/Overview.bs

@@ -107,7 +107,7 @@ Abstract: This specification defines a model for synchronization and
     features.
 
 !Participate: <a href="https://github.com/w3c/csswg-drafts/tree/main/web-animations-1">Fix the text through GitHub</a>
-!Participate: Join the &lsquo;waapi&rsquo; channel on the <a href="https://damp-lake-50659.herokuapp.com/">Animation at Work</a> slack
+!Participate: Join the "waapi" channel on the <a href="https://damp-lake-50659.herokuapp.com/">Animation at Work</a> slack
 !Participate: IRC: <a href="ircs://irc.w3.org:6667/webanimations">#webanimations</a> on W3C's IRC
 
 Repository: w3c/csswg-drafts
@@ -2342,11 +2342,11 @@ Determining the phase of an <a>animation effect</a> requires the following
 definitions:
 
 :   <dfn>animation direction</dfn>
-::  &lsquo;backwards&rsquo; if the effect is <a>associated with an
+::  "backwards" if the effect is <a>associated with an
     animation</a> <em>and</em> the associated <a>animation</a>'s
     [=playback rate=] is less than zero;
     in all other cases, the <a>animation direction</a> is
-    &lsquo;forwards&rsquo;.
+    "forwards".
 :   <dfn>before-active boundary time</dfn>
 ::  <code>max(min(<a>start delay</a>, <a>end time</a>), 0)</code>
 :   <dfn>active-after boundary time</dfn>
@@ -2359,7 +2359,7 @@ animation effect's <a>local time</a> is not <a>unresolved</a> and
 
 1.  the <a>local time</a> is less than the <a>before-active boundary time</a>,
     <em>or</em>
-1.  the <a>animation direction</a> is &lsquo;backwards&rsquo; and the <a>local
+1.  the <a>animation direction</a> is "backwards" and the <a>local
     time</a> is equal to the <a>before-active boundary time</a>.
 
 An <a>animation effect</a> is in the <dfn export for="animation effect">after phase</dfn> if the
@@ -2368,7 +2368,7 @@ animation effect's <a>local time</a> is not <a>unresolved</a> and
 
 1.  the <a>local time</a> is greater than the <a>active-after boundary
     time</a>, <em>or</em>
-1.  the <a>animation direction</a> is &lsquo;forwards&rsquo; and the <a>local
+1.  the <a>animation direction</a> is "forwards" and the <a>local
     time</a> is equal to the <a>active-after boundary time</a>.
 
 An <a>animation effect</a> is in the <dfn export for="animation effect">active phase</dfn> if the
@@ -2515,14 +2515,14 @@ Some examples of the these fill modes are illustrated below.
     alt="Examples of various fill modes and the states produced.">
   <figcaption>
     Examples of various fill modes and the states produced.<br>
-    (a) fill mode &lsquo;none&rsquo;. The animation effect has no effect
+    (a) fill mode "none". The animation effect has no effect
         outside its active phase.<br>
-    (b) fill mode &lsquo;forwards&rsquo;. After the active phase has
+    (b) fill mode "forwards". After the active phase has
         finished, the <a>iteration progress</a> value continues to maintain
         a fill value.<br>
-    (c) fill mode &lsquo;backwards&rsquo;. The animation effect produces
+    (c) fill mode "backwards". The animation effect produces
         a fill value until the start of the active phase.<br>
-    (d) fill mode &lsquo;both&rsquo;. Both before and after the active
+    (d) fill mode "both". Both before and after the active
         phase the animation effect produces a fill value.
   </figcaption>
 </figure>
@@ -3425,16 +3425,16 @@ an <a>effect target</a> for which computed property values can be calculated.
             properties=] [[!CSS-WRITING-MODES-4]] based on the computed value of
             'writing-mode' and/or 'direction' for the <a>effect target</a>.
 
-        For example, if <var>keyframe</var> has a value of &lsquo;12pt&rsquo;
+        For example, if <var>keyframe</var> has a value of "12pt"
         for the 'border-width' property, the user agent may
         <a>compute a property value</a>
-        of &lsquo;16px&rsquo; for each of the longhand properties:
+        of "16px" for each of the longhand properties:
         'border-bottom-width', 'border-left-width', 'border-right-width', and
         'border-top-width'.
         As a result, <var>computed keyframe</var> would <em>not</em> have a
         value for the 'border-width' property, but would instead include
         each of the longhand properties, and each with the value
-        &lsquo;16px&rsquo;.
+        "16px".
 
         If conflicts arise when expanding shorthand properties or replacing
         logical properties with physical properties, apply the following rules
@@ -3644,7 +3644,7 @@ Note: this procedure permits overlapping <a>keyframes</a>.
     range [0, 1].
     One example is an animation that interpolates from green to yellow
     but has an overshoot timing function that makes it temporarily
-    interpolate &lsquo;beyond&rsquo; yellow to red before settling back
+    interpolate "beyond" yellow to red before settling back
     to yellow.
 
     While this effect could be achieved by modification of the keyframes
@@ -3728,12 +3728,12 @@ ordering between different classes of animations or within a particular class.
 
 <div class='informative-bg'><em>This section is non-normative</em>
 
-For example, animations whose <a lt="animation class">class</a> is &lsquo;CSS
-animation&rsquo; are defined as having a <em>higher</em> composite order than
-animations whose class is &lsquo;CSS transition&rsquo; but <em>lower</em> than
+For example, animations whose <a lt="animation class">class</a> is "CSS
+animation" are defined as having a <em>higher</em> composite order than
+animations whose class is "CSS transition" but <em>lower</em> than
 other animations without a specific class.
 
-Within the set of &lsquo;CSS animation&rsquo; objects, specialized
+Within the set of "CSS animation" objects, specialized
 composite ordering is defined based on the 'animation-name' property
 amongst other factors.
 
@@ -3835,14 +3835,14 @@ depends on the <a lt="animation class">class</a> of the <a>animation</a> <a
 lt="associated animation of an animation effect">associated with</a> the
 effect with the highest composite order in the <a>effect stack</a> for a given
 property.
-By default, the specified value is added to the &lsquo;Animation
-declarations&rsquo; level of the cascade ([[!css-cascade-3]]).
+By default, the specified value is added to the "Animation
+declarations" level of the cascade ([[!css-cascade-3]]).
 
 <div class='informative-bg'><em>This section is non-normative</em>
 
 For example, if the effect with the highest composite order is associated with
-a &lsquo;CSS transition&rsquo;-class animation, the <a>composited value</a>
-will be added to &lsquo;Transition declarations&rsquo; level of the cascade.
+a "CSS transition"-class animation, the <a>composited value</a>
+will be added to "Transition declarations" level of the cascade.
 
 </div>
 
@@ -3999,7 +3999,7 @@ As a result of the above requirement, if an animation targets, for example,
 the 'transform' property of an element, a <a>stacking context</a> will be
 created for the <a>effect target</a> so long as the <a>animation</a> is in
 the [=animation effect/before phase=], the [=animation effect/active phase=] or, if it has a
-<a>fill mode</a> of &lsquo;forwards&rsquo; or &lsquo;both&rsquo;, the [=animation effect/after phase=].
+<a>fill mode</a> of "forwards" or "both", the [=animation effect/after phase=].
 
 </div>
 
@@ -4615,8 +4615,8 @@ dictionary OptionalEffectTiming {
     Note that the value of {{EffectTiming/iterations}} is effectively
     <em>added</em> to the {{EffectTiming/iterationStart}} such that
     an animation effect with an {{EffectTiming/iterationStart}} of
-    &lsquo;0.5&rsquo; and {{EffectTiming/iterations}} of
-    &lsquo;2&rsquo; will still repeat twice however it will begin
+    "0.5" and {{EffectTiming/iterations}} of
+    "2" will still repeat twice however it will begin
     and end half-way through its <a>iteration interval</a>.
 
     {{EffectTiming/iterationStart}} values greater than
@@ -5155,7 +5155,7 @@ The {{KeyframeEffect(target, keyframes, options)|KeyframeEffect}} constructor
 offers a number of approaches to creating new {{KeyframeEffect}} objects.
 
 At its simplest, a {{KeyframeEffect}} object that changes the
-&lsquo;left&rsquo; property of <code>elem</code> to 100px over three
+"left" property of <code>elem</code> to 100px over three
 seconds can be constructed as follows:
 
 <div class='example'><pre class='lang-javascript'>
@@ -6165,7 +6165,7 @@ in this specification, the following invariants can be observed:
     <pre class="lang-javascript">
 // Initially animation.effect.getComputedTiming().localTime is 3000
 animation.currentTime += 2000;
-alert(animation.effect.getComputedTiming().localTime); // Displays &lsquo;5000&rsquo;</pre>
+alert(animation.effect.getComputedTiming().localTime); // Displays "5000"</pre>
      </div>
 
 :   Querying the computed style of a property affected by animation
@@ -6180,7 +6180,7 @@ alert(animation.effect.getComputedTiming().localTime); // Displays &lsquo;5000&r
     <pre class="lang-javascript">
 // Set opacity to 0 immediately
 elem.animate({ opacity: 0 }, { fill: 'forwards' });
-alert(window.getComputedStyle(elem).opacity); // Displays &lsquo;0&rsquo;</pre>
+alert(window.getComputedStyle(elem).opacity); // Displays "0"</pre>
     </div>
 
 :   Changes made within the same task are synchronized such