js触发css定义好的动画

JavaScript 触发 CSS 定义好的动画主要涉及到两个方面的知识：CSS 动画和 JavaScript 事件处理。

基础概念

CSS 动画：通过 CSS 的 @keyframes 规则定义动画序列，然后应用到一个元素上，使其按照定义好的样式变化进行动画效果展示。

JavaScript 事件处理：JavaScript 可以监听和响应各种事件，如点击事件、鼠标移动事件等，通过事件处理函数来执行特定的逻辑，包括触发动画。

类型

渐变动画：元素从一个状态逐渐过渡到另一个状态，如颜色变化、位置移动等。
关键帧动画：通过 @keyframes 定义一系列关键帧，元素在这些关键帧之间平滑过渡。

应用场景

页面加载动画：提升用户体验，使页面加载过程更加生动。
交互反馈：用户点击按钮或进行其他操作时，给予视觉上的反馈。
引导教程：通过动画引导用户了解产品的使用方法。

示例代码

假设我们有一个简单的 CSS 动画，定义如下：

/* 定义动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 应用动画到元素 */
.fade-in-element {
  animation-name: fadeIn;
  animation-duration: 1s;
}

我们可以使用 JavaScript 来触发动画：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .fade-in-element {
    opacity: 0;
    transition: opacity 1s;
  }

  .fade-in-active {
    opacity: 1;
  }
</style>
</head>
<body>

<div id="animatedElement" class="fade-in-element">Hello, World!</div>

<button onclick="startAnimation()">Start Animation</button>

<script>
function startAnimation() {
  var element = document.getElementById('animatedElement');
  element.classList.add('fade-in-active');
}
</script>

</body>
</html>