CodePen Embed - transform高效的原因

<button>死循环</button>
<div class="ball ball_1"></div>
<div class="ball ball_2"></div>

.ball {
  width: 100px;
  height: 100px;
  margin: 30px 0;
  border-radius: 100px;
  background-color: red;
}
.ball_1 {
  animation: move_1 1s alternate infinite ease-in-out;
}
.ball_2 {
  position: fixed;
  left: 0;
  animation: move_2 1s alternate infinite ease-in-out;
}
@keyframes move_1 {
  to {
    transform: translate(100px);
  }
}
@keyframes move_2 {
  to {
    left: 100px;
  }
}

function delay(duration) {
  const start = Date.now();
  while (Date.now() - start < duration) {}
}
const btn = document.querySelector("button");
btn.onclick = function () {
  delay(5000);
};

This Pen is owned by Jandan on CodePen.

See more by @welives on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.