<!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>