当前位置：首页 > JavaScript

js实现css3动画

2026-04-04 08:27:54JavaScript

使用 JavaScript 触发 CSS3 动画

JavaScript 可以通过操作 DOM 元素的类名或直接修改样式来触发 CSS3 动画。CSS3 动画通常通过 @keyframes 定义，再通过 animation 属性应用到元素上。

方法 1：通过添加/移除类名触发动画

定义 CSS 动画和类名：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fadeIn {
  animation: fadeIn 1s ease-in-out;
}

JavaScript 代码：

js实现css3动画

const element = document.getElementById('target');
element.classList.add('animate-fadeIn');

// 动画结束后移除类名（可选）
element.addEventListener('animationend', () => {
  element.classList.remove('animate-fadeIn');
});

方法 2：直接修改元素的 `style` 属性

JavaScript 代码：

const element = document.getElementById('target');
element.style.animation = 'fadeIn 1s ease-in-out';

方法 3：动态创建并插入 `@keyframes`

通过 JavaScript 动态创建样式表并插入 @keyframes：

js实现css3动画

const style = document.createElement('style');
style.innerHTML = `
  @keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
`;
document.head.appendChild(style);

const element = document.getElementById('target');
element.style.animation = 'slideIn 0.5s ease-out';

方法 4：使用 `animate()` API

现代浏览器支持 Web Animations API，无需 CSS 即可创建动画：

const element = document.getElementById('target');
element.animate(
  [
    { opacity: 0 },
    { opacity: 1 }
  ],
  {
    duration: 1000,
    easing: 'ease-in-out',
    iterations: 1
  }
);

方法 5：控制动画播放状态

通过 JavaScript 控制动画的播放、暂停等状态：

const element = document.getElementById('target');
element.style.animation = 'fadeIn 2s ease-in-out forwards';
element.style.animationPlayState = 'paused';

// 播放动画
element.style.animationPlayState = 'running';

// 重置动画
element.style.animation = 'none';
element.offsetHeight; // 触发重绘
element.style.animation = 'fadeIn 2s ease-in-out forwards';