如何用CSS3实现动画效果

发布时间：2025-04-13 20:59:26 作者：小樊
来源：亿速云阅读：108

使用CSS3实现动画效果主要依赖于@keyframes规则和animation属性。下面是一个简单的例子，展示了如何创建一个平移动画：

定义关键帧：使用@keyframes规则定义动画的关键帧。关键帧指定了动画在不同时间点的样式。
```
@keyframes moveRight {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
```
在这个例子中，moveRight动画从初始位置（from）移动到右侧100像素的位置（to）。

应用动画：使用animation属性将定义好的关键帧应用到HTML元素上。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: moveRight; /* 指定动画名称 */
  animation-duration: 2s; /* 动画持续时间 */
  animation-timing-function: linear; /* 动画速度曲线 */
  animation-iteration-count: infinite; /* 动画重复次数 */
}

在这个例子中，.box类应用了moveRight动画，持续时间为2秒，速度曲线为线性，并且无限重复。

HTML结构：在HTML文件中添加相应的元素。
```
<div class="box"></div>
```

完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 Animation Example</title>
  <style>
    @keyframes moveRight {
      from { transform: translateX(0); }
      to { transform: translateX(100px); }
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: moveRight;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

这个例子展示了如何使用CSS3创建一个简单的平移动画。你可以根据需要调整关键帧、动画属性和HTML结构来实现更复杂的动画效果。

如何用CSS3实现动画效果

相关阅读