| <!doctype html> |
| <!-- |
| Copyright 2019 The Chromium Authors |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width"> |
| <title>JS Bin</title> |
| <style> |
| #mainanim { |
| width: 200px; |
| height: 200px; |
| background-color: red; |
| animation: expand 2s infinite |
| } |
| @keyframes expand { |
| 0% { width: 200px; } |
| 100% { width: 500px; } |
| } |
| </style> |
| </head> |
| <body> |
| <div id='mainanim'></div> |
| |
| </body> |
| <script> |
| var startTime = new Date(); |
| var frameNum = 0; |
| function jank() { |
| frameNum = frameNum + 1; |
| // Make the jank long enough such that there is one main frame presented for |
| // every two main frames. |
| while ((new Date() - startTime) < 2 * 16.67 * frameNum + 20) {} |
| requestAnimationFrame(jank); |
| } |
| requestAnimationFrame(jank); |
| </script> |
| </html> |
