CSS 支持两种类型的动画：关键帧动画和过渡动画。
- 关键帧动画是由一系列关键帧组成的动画，每个关键帧定义了某个时刻的样式，浏览器会在这些关键帧之间平滑地插入过渡帧以创建动画效果。以下是一个简单的例子：
```css
@keyframes example {
0% {background-color:red;}
25% {background-color:yellow;}
50% {background-color:blue;}
75% {background-color:green;}
100% {background-color:red;}
}
.example {animation-name:example; animation-duration:5s;}
此示例将 div 元素的背景色从红色渐变到黄色，再到蓝色，最后变为绿色，整个过程持续 5 秒。
* 过渡动画是在属性变化时发生的动画，例如当鼠标悬停在元素上时发生的变化。以下是一个简单的例子：
```css
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s ease-in-out, height 2s ease-in-out;
}
div:hover {
width: 200px;
height: 200px;
}
当鼠标悬停在 div 元素上时，宽度和高度将会从 100px 平滑地变为 200px，整个过程持续 2 秒。
以上是 CSS 动画的基本示例，您可以通过调整关键帧的时间、顺序和样式，或者添加更多的过渡属性来创建更多复杂的效果。通过 CSS 动画，您可以制作吸引人的动态效果，提升网站用户体验。
