CSS动画是一种通过改变元素样式来实现动画效果的技术，它可以使网页更加生动、有趣，提高用户体验，CSS动画可以分为两种：过渡（transition）和动画（animation）。
过渡（transition）
过渡是一种简单的动画效果，可以实现元素的样式在不同状态之间的平滑切换，过渡需要指定元素的几个关键状态属性（如背景颜色、宽度等），以及这些属性在过渡过程中的变化速度。
1、基本语法
/* 定义过渡效果 */ transition: property duration timing-function delay; /* 或者分别指定各属性 */ transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay;
2、示例
/* 当鼠标悬停在按钮上时，背景颜色从透明变为蓝色，变化时间为0.5秒，速度先快后慢，延迟0.1秒开始 */
button {
background-color: transparent;
transition: background-color 0.5s ease-in-out 0.1s;
}
button:hover {
background-color: blue;
}
动画（animation）
动画是一种更复杂的动画效果，可以实现元素的样式在一定时间内的连续变化，动画需要定义关键帧（keyframes），即元素在不同时间点的状态，浏览器会根据关键帧自动计算中间状态，实现平滑的动画效果。
1、基本语法
/* 定义动画名称 */
@keyframes animation-name {
/* 定义关键帧 */
from { property: value; }
to { property: value; }
}
/* 应用动画 */
element {
animation-name: animation-name;
animation-duration: duration;
animation-timing-function: timing-function;
animation-delay: delay;
animation-iteration-count: iteration-count;
animation-direction: direction;
animation-fill-mode: fill-mode;
}
2、示例
/* 定义一个旋转360度的动画 */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 应用动画 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: rotate;
animation-duration: 2s; /* 动画持续时间为2秒 */
animation-timing-function: linear; /* 动画速度为线性 */
animation-delay: 1s; /* 动画延迟1秒开始 */
animation-iteration-count: infinite; /* 动画无限循环 */
}
过渡与动画的区别
1、过渡只能实现元素的样式在不同状态之间的平滑切换，而动画可以实现元素的样式在一定时间内的连续变化，动画可以实现更复杂的效果。
2、过渡需要指定元素的几个关键状态属性，而动画需要定义关键帧，关键帧可以包含多个属性的变化，从而实现更丰富的动画效果。