CSS3 动画允许你创建平滑的动画效果，而不需要依赖 JavaScript 或其他脚本语言，你可以使用 CSS3 的 `@keyframes` 规则和 `animation` 属性来创建动画。
### 1. `@keyframes` 规则
`@keyframes` 规则用于创建动画，在这个规则中，你可以定义动画在不同时间点的样式。
以下是一个简单的动画，使元素的颜色在动画过程中从红色变为蓝色：
```css
@keyframes colorChange {
0% {background-color: red;}
100% {background-color: blue;}
```
在这个例子中，`0%` 和 `100%` 是关键帧，分别代表动画的开始和结束状态，你可以添加更多的关键帧来定义动画过程中的更多状态。
### 2. `animation` 属性
`animation` 属性是一个简写属性，用于设置以下六个动画属性：
* `animation-name`：指定要绑定到选择器的关键帧名称。
* `animation-duration`：定义动画完成一个周期所需的时间，默认是 0。
* `animation-timing-function`：定义动画的速度曲线，默认是 "ease"。
* `animation-delay`：定义动画在启动前的延迟时间，默认是 0。
* `animation-iteration-count`：定义动画的播放次数，默认是 1。
* `animation-direction`：定义是否应该轮流反向播放动画，默认是 "normal"。
以下是如何将上述的 `colorChange` 动画应用到一个元素上，并设置动画的持续时间为 2 秒，无限次循环：
```css
div {
animation-name: colorChange;
animation-duration: 2s;
animation-iteration-count: infinite;
```
或者使用 `animation` 简写属性：
```css
div {
animation: colorChange 2s infinite;
```
### 3. 示例
以下是一个完整的示例，展示如何使用 CSS3 动画来创建一个元素的颜色渐变效果：
```html
```
在这个示例中，一个 `div` 元素的背景颜色会在 4 秒内从红色变为绿色，然后再变为蓝色，并且这个动画会无限次循环。