<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.circle {
width: 50px;
height: 50px;
transform: translate(50px, 0px);
border-radius: 30px;
}
.circle.blue {
background: #1c87c9;
will-change: transform;
}
.circle.green {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Пример свойства will-change</h2>
<div class="circle green"></div>
<div class="circle blue"></div>
<div class="circle green"></div>
<div class="circle blue"></div>
<div class="circle green"></div>
<script>
var circles= document.getElementsByClassName("circle blue");
function update(t) {
for (var i = 0; i < circles.length; i++) {
var xpos = Math.sin(t/1000 + 1000*i) * 50 + 50;
circles[i].style.transform = "translate(" + xpos + "px, 0px)";
}
window.requestAnimationFrame(update);
}