[web-animations-1] Escape template string delimeters in code samples

Author: birtles

web-animations-1/Overview.bs

@@ -2429,7 +2429,7 @@ the style as illustrated below:
 
 <div class="example"><pre class="lang-javascript">
 // In the first frame after the following animation finishes, the callback for
-// the `finished` promise will run BEFORE style is updated and hence will NOT
+// the \`finished\` promise will run BEFORE style is updated and hence will NOT
 // flicker.
 elem.animate({ transform: 'translateY(100px)' }, 200).finished(() => {
   elem.style.transform = 'translateY(100px)';
@@ -2455,11 +2455,11 @@ For example:
 <div class="example"><pre class="lang-javascript">
 elem.addEventListener('click', async evt => {
   const animation = elem.animate(
-    { transform: `translate(${evt.clientX}px, ${evt.clientY}px)` },
+    { transform: \`translate(${evt.clientX}px, ${evt.clientY}px)\` },
     { duration: 800, fill: 'forwards' }
   );
   await animation.finished;
-  // commitStyles will record the style up to and including `animation` and
+  // commitStyles will record the style up to and including \`animation\` and
   // update elem's specified style with the result.
   animation.commitStyles();
   animation.cancel();
@@ -3869,7 +3869,7 @@ For example, consider the following code:
 <div class="example"><pre class="lang-javascript">
 elem.addEventListener('mousemove', evt => {
   circle.animate(
-    { transform: `translate(${evt.clientX}px, ${evt.clientY}px)` },
+    { transform: \`translate(${evt.clientX}px, ${evt.clientY}px)\` },
     { duration: 500, fill: 'forwards' }
   );
 });