当前位置：首页 > JavaScript

js实现div动画

2026-02-02 16:32:03JavaScript

使用CSS动画实现div动画

在HTML中创建一个div元素，并通过CSS的@keyframes规则定义动画效果。这种方式性能较好，适合简单动画。

<div class="animated-div"></div>

<style>
.animated-div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s infinite alternate;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}
</style>

使用JavaScript的requestAnimationFrame

对于需要更复杂控制的动画，可以使用requestAnimationFrameAPI。这个方法会在浏览器重绘之前执行回调函数，实现平滑动画。

js实现div动画

const div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'blue';
document.body.appendChild(div);

let position = 0;
function animate() {
  position += 2;
  div.style.transform = `translateX(${position}px)`;

  if (position < 200) {
    requestAnimationFrame(animate);
  }
}
animate();

使用GSAP动画库

GSAP是一个专业的动画库，提供了丰富的动画功能和更好的性能控制。

js实现div动画

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

<div id="gsap-div"></div>

<script>
gsap.to("#gsap-div", {
  duration: 2,
  x: 200,
  backgroundColor: "green",
  repeat: -1,
  yoyo: true,
  ease: "power1.inOut"
});
</script>

使用Web Animations API

现代浏览器支持的Web Animations API可以直接通过JavaScript创建和控制动画。

const div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'purple';
document.body.appendChild(div);

div.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(200px)' }
], {
  duration: 1000,
  iterations: Infinity,
  direction: 'alternate',
  easing: 'ease-in-out'
});

使用CSS过渡效果

对于简单的状态变化动画，CSS的transition属性是最简单的实现方式。

<div id="transition-div"></div>

<style>
#transition-div {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: transform 0.5s ease, background-color 0.5s ease;
}

#transition-div:hover {
  transform: translateX(200px);
  background-color: pink;
}
</style>

每种方法都有其适用场景：CSS动画适合简单效果，requestAnimationFrame适合需要精细控制的动画，GSAP适合复杂动画序列，Web Animations API是原生解决方案，CSS过渡则适合状态变化。根据项目需求选择最适合的方法。