CSS3 动画如何实现循环播放

发布时间：2025-02-08 19:50:04 作者：小樊
来源：亿速云阅读：89

要实现 CSS3 动画的循环播放，可以使用 animation 属性配合 @keyframes 规则。以下是一个简单的示例：

首先，定义一个 @keyframes 规则，设置动画的开始状态、结束状态和持续时间。这里我们创建一个名为 my-animation 的动画，使元素从左向右移动，然后返回原点：

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

接下来，将定义好的动画应用到一个 HTML 元素上，设置动画名称、持续时间、迭代次数（这里设置为无限循环）和动画播放方向：

.my-element {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  animation: my-animation 2s linear infinite;
}

在这个例子中，.my-element 类将应用 my-animation 动画，动画持续时间为 2 秒，以线性速度播放，并且无限循环播放。

完整的 HTML 和 CSS 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    @keyframes my-animation {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(100px);
      }
    }

    .my-element {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      animation: my-animation 2s linear infinite;
    }
  </style>
</head>
<body>
  <div class="my-element"></div>
</body>
</html>

将上述代码保存为一个 HTML 文件，然后在浏览器中打开，你将看到一个蓝色方块在页面上无限循环地从左向右移动。

CSS3 动画如何实现循环播放

相关阅读