[web-animations-1] Tweak examples to not use forEach()

Author: birtles

web-animations-1/Overview.bs

@@ -284,9 +284,9 @@ const isAnimating = elem.getAnimations().some(
     <div class='example'>
     <pre class='lang-javascript'>
 // Pause all existing animations in the document
-document.getAnimations().forEach(
-  animation =&gt; animation.pause()
-);
+for (const animation of document.getAnimations()) {
+  animation.pause()
+}
     </pre>
     </div>
 
@@ -318,13 +318,16 @@ elem.animate({ transform: 'scale(0)', opacity: 0 }, 300);
     <div class='example'>
     <pre class='lang-javascript'>
 // Print the id of any opacity animations on elem
-elem.getAnimations().filter(
-  animation =&gt;
+for (const animation of elem.getAnimations()) {
+  if (
     animation.effect instanceof KeyframeEffect &&
-    animation.effect.getKeyframes().some(
-      frame =&gt; frame.hasOwnProperty('opacity')
-    )
-).forEach(animation =&gt; console.log(animation.id));
+    animation.effect
+      .getKeyframes()
+      .some(frame =&gt; frame.hasOwnProperty('opacity'))
+  ) {
+    console.log(animation.id);
+  }
+}
     </pre>
     </div>
 
@@ -334,16 +337,18 @@ elem.getAnimations().filter(
     <div class='example'>
     <pre class='lang-javascript'>
 // Slow down and replay any transform animations
-elem.getAnimations().filter(
+const transformAnimations = elem.getAnimations().filter(
   animation =&gt;
     animation.effect instanceof KeyframeEffect &&
     animation.effect.getKeyframes().some(
       frame =&gt; frame.hasOwnProperty('transform')
     )
-).forEach(animation =&gt; {
+);
+
+for (const animation of transformAnimations) {
   animation.currentTime = 0;
   animation.updatePlaybackRate(0.5);
-});
+}
     </pre>
     </div>
 
@@ -355,18 +360,16 @@ elem.getAnimations().filter(
 <div class='example'>
 <pre class='lang-javascript'>
 // Seek to the half-way point of an animation and check that the opacity is 50%
-elem.getAnimations().forEach(
-  animation =&gt;
-    animation.currentTime =
-      animation.effect.getComputedTiming().delay +
-      animation.effect.getComputedTiming().activeDuration / 2;
-);
+for (const animation of elem.getAnimations()) {
+  const { delay, activeDuration } = animation.effect.getComputedTiming();
+  animation.currentTime = delay + activeDuration / 2;
+}
 assert.strictEqual(getComputedStyle(elem).opacity, '0.5');
 
 // Check that the loading screen is hidden after the animations finish
-elem.getAnimations().forEach(
-  animation =&gt; animation.finish()
-);
+for (const animation of elem.getAnimations()) {
+  animation.finish();
+}
 // Wait one frame so that event handlers have a chance to run
 requestAnimationFrame(() =&gt; {
   assert.strictEqual(