CSS3 动画与 JavaScript 结合：让你的网页动起来！

你是否想过让你的网页更加生动有趣？是否想过让你的网站内容不再那么静态？CSS3 动画和 JavaScript 的结合，可以让你轻松实现这些目标，让你的网页动起来！

CSS3 动画：基础与创意

CSS3 动画是 CSS3 中的一项强大功能，它允许你通过简单的代码实现各种动画效果，例如移动、旋转、缩放、透明度变化等等。你可以使用 animation 属性来定义动画，并使用 @keyframes 规则来指定动画的各个关键帧。

例如，以下代码可以实现一个简单的旋转动画：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

这段代码会让一个红色的方块以每秒两圈的速度持续旋转。

JavaScript 的介入：交互与控制

CSS3 动画虽然强大，但它只能实现预先定义好的动画效果。如果你想要让动画具有交互性，例如根据用户的操作来改变动画的播放速度、暂停或重启动画，那么就需要使用 JavaScript 来控制动画了。

JavaScript 可以通过以下几种方式来控制 CSS3 动画：

修改动画属性： 你可以使用 JavaScript 修改 CSS 属性，例如修改 animation-play-state 属性来暂停或恢复动画，修改 animation-duration 属性来改变动画的播放速度等等。
添加事件监听： 你可以使用 JavaScript 添加事件监听，例如鼠标悬停、点击事件等等，然后在事件发生时修改动画属性。
使用动画库： 一些动画库，例如 GreenSock Animation Platform (GSAP)，可以提供更方便的 API 来控制 CSS3 动画。

实例：一个简单的交互动画

以下是一个简单的例子，展示如何使用 JavaScript 来控制 CSS3 动画，实现一个简单的交互动画：

<!DOCTYPE html>
<html>
<head>
  <title>交互动画</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: rotate 2s linear infinite;
    }

    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box');

    box.addEventListener('mouseover', () => {
      box.style.animationPlayState = 'paused';
    });

    box.addEventListener('mouseout', () => {
      box.style.animationPlayState = 'running';
    });
  </script>
</body>
</html>

这段代码实现了一个简单的交互动画：当鼠标悬停在红色方块上时，方块会停止旋转；当鼠标移开时，方块会继续旋转。

总结

CSS3 动画和 JavaScript 的结合，可以让你创建更加生动有趣的网页动画。无论是简单的动画效果，还是复杂的交互动画，你都可以通过学习和实践，将它们应用到你的网页项目中，让你的网站更加吸引用户！

CSS3 动画与 JavaScript 结合：让你的网页动起来！