你想要一份更详细、更系统的CSS3动画（animation）使用教程，我会从基础概念到实战案例，一步步拆解CSS3动画的核心用法，让你能轻松上手并灵活运用。
CSS3 动画（animation）全教程
CSS3动画是通过@keyframes定义关键帧，再通过animation属性将动画应用到元素上，能实现比transition更复杂、更灵活的动态效果，且无需JavaScript参与。
一、核心概念理解
在开始写代码前，先理清两个核心部分：
- @keyframes（关键帧） ：定义动画的"关键状态"，比如起始、中间、结束时元素的样式。
- animation 属性：将定义好的关键帧动画应用到元素上，并设置动画的时长、循环、速度等规则。
二、基础语法与步骤
步骤1：定义关键帧（@keyframes）
/* 格式：@keyframes 动画名称 { 关键帧规则 } */
@keyframes 动画名称 {
/* 0% 表示动画开始（也可以用 from 替代） */
0% {
/* 起始样式 */
transform: translateX(0);
opacity: 0;
}
/* 50% 表示动画进行到一半 */
50% {
/* 中间样式 */
transform: translateX(100px);
opacity: 1;
}
/* 100% 表示动画结束（也可以用 to 替代） */
100% {
/* 结束样式 */
transform: translateX(200px);
opacity: 0;
}
}
步骤2：应用动画（animation 属性）
/* 给元素添加动画 */
.animated-box {
width: 100px;
height: 100px;
background: #007bff;
/* 核心：animation 复合属性（推荐） */
/* 格式：动画名称 时长 速度曲线 延迟 循环次数 方向 填充模式 播放状态 */
animation: 动画名称 2s ease 0.5s infinite alternate forwards running;
/* 也可以拆分为单个属性（便于理解和调试） */
/* animation-name: 动画名称; // 必选：指定关键帧名称 */
/* animation-duration: 2s; // 必选：动画时长（默认0，无效果） */
/* animation-timing-function: ease; // 可选：速度曲线（默认ease） */
/* animation-delay: 0.5s; // 可选：延迟播放（默认0） */
/* animation-iteration-count: infinite; // 可选：循环次数（默认1，infinite无限） */
/* animation-direction: alternate; // 可选：播放方向（默认normal） */
/* animation-fill-mode: forwards; // 可选：动画结束后样式（默认none） */
/* animation-play-state: running; // 可选：播放状态（默认running，paused暂停） */
}
三、关键属性详解（必掌握）
1. 速度曲线（animation-timing-function）
控制动画的播放速度，常用值：
/* 常用值示例 */
.animated-box {
/* linear：匀速（最常用） */
animation-timing-function: linear;
/* ease：慢→快→慢（默认） */
/* ease-in：慢→快 */
/* ease-out：快→慢 */
/* ease-in-out：慢→快→慢（比ease更平缓） */
/* 自定义贝塞尔曲线（精准控制） */
/* animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); */
}
2. 播放方向（animation-direction）
控制动画是否反向播放：
.animated-box {
/* normal：正常播放（默认），从0%→100% */
/* alternate：交替播放，奇数次正向（0%→100%），偶数次反向（100%→0%） */
/* reverse：反向播放（100%→0%） */
/* alternate-reverse：反向交替播放 */
animation-direction: alternate;
}
3. 填充模式（animation-fill-mode）
控制动画开始前/结束后的元素样式：
.animated-box {
/* none：默认，动画结束后回到初始样式 */
/* forwards：动画结束后，保持最后一帧样式 */
/* backwards：动画延迟期间，保持第一帧样式 */
/* both：同时应用forwards和backwards */
animation-fill-mode: forwards;
}
4. 播放状态（animation-play-state）
常用于通过:hover、JS控制动画暂停/播放：
.animated-box {
animation: move 2s infinite;
}
/* 鼠标悬停时暂停动画 */
.animated-box:hover {
animation-play-state: paused;
}
四、实战案例（直接复用）
案例1：呼吸灯效果（透明度变化）
/* 定义关键帧 */
@keyframes breathe {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* 应用动画 */
.breathe-box {
width: 80px;
height: 80px;
background: #ff6700;
border-radius: 50%;
/* 匀速、无限循环 */
animation: breathe 2s linear infinite;
}
案例2：加载动画（旋转+多元素）
<!-- HTML结构 -->
<div class="loader">
<div class="loader-item"></div>
<div class="loader-item"></div>
<div class="loader-item"></div>
</div>
/* 定义旋转关键帧 */
@keyframes load {
0% {
transform: translateY(0);
opacity: 0.8;
}
50% {
transform: translateY(-20px);
opacity: 0.2;
}
100% {
transform: translateY(0);
opacity: 0.8;
}
}
.loader {
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
height: 100px;
}
.loader-item {
width: 12px;
height: 30px;
background: #007bff;
border-radius: 6px;
animation: load 1.2s ease infinite;
}
/* 给每个小球设置不同延迟，实现错落效果 */
.loader-item:nth-child(2) {
animation-delay: 0.2s;
}
.loader-item:nth-child(3) {
animation-delay: 0.4s;
}
案例3：文字渐入动画
@keyframes text-fade {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.fade-text {
font-size: 24px;
animation: text-fade 0.8s ease forwards;
/* 初始状态隐藏 */
opacity: 0;
}
五、使用注意事项
- 性能优化：优先使用
transform和opacity属性做动画（浏览器硬件加速，无重绘），避免用width、height、top、left（会触发频繁重排，卡顿）。 - 兼容性：现代浏览器（Chrome/Firefox/Safari/Edge）均支持CSS3动画，无需加前缀；如需兼容老旧浏览器（如IE10-），可加前缀
-webkit-（如@-webkit-keyframes、-webkit-animation）。 - 动画暂停：通过
animation-play-state: paused暂停动画，比重新设置时长为0更优雅。
总结
- 核心结构：CSS3动画由
@keyframes（定义关键帧）和animation（应用动画）两部分组成，animation-duration是必选属性（否则无动画效果）。 - 常用属性：
animation-iteration-count: infinite（无限循环）、animation-direction: alternate（交替播放）、animation-fill-mode: forwards（保持结束样式）是高频组合。 - 性能原则：动画优先操作
transform和opacity，避免触发页面重排，保证动画流畅。
你可以把这些案例代码复制到HTML文件中运行，修改关键帧的样式、动画时长、速度曲线等参数，直观感受不同设置的效果，很快就能熟练掌握。如果想实现某个特定的动画效果（比如弹跳、滑动、闪烁），可以告诉我，我会针对性给出代码。
