Update index-waa.html

mtdowner · web-flow · commit b7174e8f2f54 · 2023-10-25T21:16:32.000-07:00
diff --git a/animation-frames-timing-function/index-waa.html b/animation-frames-timing-function/index-waa.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-us">
   <head>
     <meta charset="utf-8" />
@@ -23,37 +23,39 @@
         left: 10px;
         color: white;
       }
-
     </style>
   </head>
   <body>
-    <div class="div1"><p>transition-timing-function: frames(10)<p></div>
-    <div class="div2"><p>transition-timing-function: steps(10);<p></div>
-    <div class="div3"><p>transition-timing-function: ease-in;<p></div>
+    <div class="div1">
+      <p>transition-timing-function: steps(5)</p>
+      <p></p>
+    </div>
+    <div class="div2">
+      <p>transition-timing-function: steps(10);</p>
+      <p></p>
+    </div>
+    <div class="div3">
+      <p>transition-timing-function: ease-in;</p>
+      <p></p>
+    </div>
 
     <script>
-
-      var easingFunctions = [
-        'frames(10)',
-        'steps(10)',
-        'ease-in'
-      ]
+      var easingFunctions = ["steps(5)", "steps(10)", "ease-in"];
 
       var keyFrames = [
-        { width: '0%', background : 'red'},
-        { width: '100%', background : 'blue'},
-      ]
+        { width: "0%", background: "red" },
+        { width: "100%", background: "blue" },
+      ];
 
-      var divs = document.querySelectorAll('div');
+      var divs = document.querySelectorAll("div");
 
-      for(var i = 0; i < divs.length; i++) {
+      for (var i = 0; i < divs.length; i++) {
         divs[i].animate(keyFrames, {
-          easing : easingFunctions[i],
-          duration : 5000,
-          iterations: Infinity
+          easing: easingFunctions[i],
+          duration: 5000,
+          iterations: Infinity,
         });
       }
-
     </script>
   </body>
 </html>
