CSS3中提供了许多有趣和实用的动画效果，可以使页面更加生动有趣，下面介绍一些常用的动画效果。
- @keyframes规则
使用@keyframes规则可以创建一系列动画帧，并定义它们的状态和样式，在页面中应用该动画后，浏览器会自动处理中间帧的变化。
语法如下：
@keyframes animation-name {
from { /* 初始状态 */ }
to { /* 结束状态 */ }
}
/* 或者使用百分比进行定义 */
@keyframes animation-name {
0% { /* 初始状态 */ }
50% { /* 中间状态 */ }
100% { /* 结束状态 */ }
}
例如，我们可以创建一个旋转动画：
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
- animation属性
使用animation属性可以对元素应用一个或多个动画效果，可以设置动画的持续时间、延迟、循环方式等属性。
语法如下：
animation: name duration timing-function delay iteration-count direction fill-mode;
其中，name指定使用的动画名称，duration指定动画持续时间，timing-function指定时间函数，delay指定动画延迟时间，iteration-count指定动画重复次数，direction指定动画方向，fill-mode指定动画填充模式。
例如，我们可以将旋转动画应用到一个div元素上：
div {
animation: spin 2s linear infinite;
}
以上是CSS3中一些常用的动画效果，可以根据实际需求进行选择和组合使用，实现不同的页面效果。