讲解一下CSS3的动画功能，并给出一个使用`@keyframes`规则的简单示例。要求：回答需要严格控制在300字内，包含代码示例，并且提供输出动画描述。
user
CSS3动画功能允许网页开发者创建动态效果，无需使用JavaScript或Flash。通过`@keyframes`规则，可以精确控制动画的各个阶段，定义动画开始和结束时的状态，以及中间任意时刻的状态。`@keyframes`规则内定义的动画可以被一个或多个CSS选择器引用，通过`animation`属性链接动画及其参数（如持续时间、延时、循环次数等）。

下面是一个简单示例，显示一个方形从红色变为蓝色的渐变效果：

```css
@keyframes colorChange {
    from { background-color: red; }
    to { background-color: blue; }
}
```

上述CSS代码定义了名为`colorChange`的动画，它将方形的背景色从红色平滑过渡到蓝色。接下来，我们需要将这个动画应用于HTML元素：

```css
.square {
    width: 100px;
    height: 100px;
    animation: colorChange 2s infinite;
}
```

这里，将`.square`类应用于一个div元素，可看到结果：

```html
<div class="square"></div>
```

这片方形会每2秒重复一次从红到蓝的颜色变换过程，形成一个无限循环的动画。此例子展示了如何利用`@keyframes`规则和`animation`属性来创建基本的CSS3动画。
assistant