hiikezoe/gist:cd56f65c43c788c838a623ed868b39d5

## gistfile1.txt
<!DOCTYPE html>
<style>
html, body {
  margin: 0;
  padding: 0;
}
@keyframes anim {
  from { transform: translateX(0vh); }
  to { transform: translateX(-100vw); }
}
#target {
  transform-origin: 100vw 50vh;
  width: 100px;
  height: 100px;
  border: 10px green solid;
  background: linear-gradient(90deg, #B2A2CD 25%, #5F5370 25%, #5F5370 50%, #D2A2BD 50%, #D2A2BD 75%, #000000 75%, #000000 100%);
  background-repeat: repeat;
}
</style>
<div id="target"></div>
<script>
window.onload = () => {
  target.style.animation = "anim 10s linear";
  target.addEventListener("animationstart", () => {
    window.requestAnimationFrame(() => {
      console.log("In rAF: " + document.timeline.currentTime + "\n");
    });
    console.log(document.timeline.currentTime + "\n");
    var valueAtStart = document.timeline.currentTime;
    var timeAtStart = window.performance.now();
    while (window.performance.now() - timeAtStart < 100) {
      // Wait 100ms
    }
  });
};
</script>
	<!DOCTYPE html>
	<style>
	html, body {
	margin: 0;
	padding: 0;
	}
	@keyframes anim {
	from { transform: translateX(0vh); }
	to { transform: translateX(-100vw); }
	}
	#target {
	transform-origin: 100vw 50vh;
	width: 100px;
	height: 100px;
	border: 10px green solid;
	background: linear-gradient(90deg, #B2A2CD 25%, #5F5370 25%, #5F5370 50%, #D2A2BD 50%, #D2A2BD 75%, #000000 75%, #000000 100%);
	background-repeat: repeat;
	}
	</style>
	<div id="target"></div>
	<script>
	window.onload = () => {
	target.style.animation = "anim 10s linear";
	target.addEventListener("animationstart", () => {
	window.requestAnimationFrame(() => {
	console.log("In rAF: " + document.timeline.currentTime + "\n");
	});
	console.log(document.timeline.currentTime + "\n");
	var valueAtStart = document.timeline.currentTime;
	var timeAtStart = window.performance.now();
	while (window.performance.now() - timeAtStart < 100) {
	// Wait 100ms
	}
	});
	};
	</script>