CSS3中使用@keyframes创建动画实例讲解
在CSS3推出之前，网页中的动画效果大多需要依赖JavaScript或者Flash实现，不仅开发成本高，而且在移动端的兼容性表现不佳。CSS3引入的@keyframes规则让开发者可以直接通过纯CSS定义动画序列，配合animation属性就能实现流畅的动画效果，大幅简化了动画的开发流程。
@keyframes规则基础概念
@keyframes的作用是定义动画的关键帧，也就是动画在不同时间节点的样式状态。你可以把动画拆分成多个阶段，每个阶段对应一个百分比时间点，分别设置该时间点的元素样式，浏览器会自动补全两个关键帧之间的样式过渡，形成连贯的动画效果。
关键帧的时间点可以用百分比表示，也可以用from（等价于0%）和to（等价于100%）表示起始和结束状态。需要注意的是，@keyframes定义的动画本身不会自动执行，必须搭配animation属性绑定到具体元素上才会生效。
基础语法说明
@keyframes的基础语法结构如下，其中动画名称可以自定义，关键帧的百分比可以根据需求设置多个：
/* 定义名为fadeIn的动画 */
@keyframes fadeIn {
/* 动画起始状态，0%位置 */
from {
opacity: 0;
transform: translateY(20px);
}
/* 动画结束状态，100%位置 */
to {
opacity: 1;
transform: translateY(0);
}
}
/* 也可以拆分多个关键帧 */
@keyframes colorChange {
0% {
background-color: #ff0000;
}
50% {
background-color: #00ff00;
}
100% {
background-color: #0000ff;
}
}定义好动画后，需要通过animation属性将动画应用到元素上，animation是多个动画相关属性的简写，常用属性包括动画名称、持续时间、速度曲线、延迟时间、播放次数、是否反向播放等。
实例1：元素淡入上升动画
下面我们实现一个常见的元素入场动画：元素初始透明度为0，位置向下偏移20px，动画执行时逐渐变为完全不透明，同时向上移动到原始位置，营造出自然入场的效果。
首先编写HTML结构，创建一个需要添加动画的容器元素：
<div class="animate-box">我是淡入上升的动画元素</div>
接着编写CSS代码，先定义fadeInUp动画，再将该动画绑定到.animate-box元素上，设置动画持续时间为1秒，速度曲线为缓出效果，执行1次后保持结束状态：
/* 定义淡入上升动画 */
@keyframes fadeInUp {
from {
opacity: 0;
/* 向下偏移20px */
transform: translateY(20px);
}
to {
opacity: 1;
/* 回到原始位置 */
transform: translateY(0);
}
}
.animate-box {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #409eff;
color: #fff;
border-radius: 8px;
/* 绑定动画：动画名称 持续时间 速度曲线 延迟时间 播放次数 填充模式 */
animation: fadeInUp 1s ease-out 0s 1 forwards;
}这里animation的最后一个参数forwards表示动画结束后，元素会保留最后一帧（100%位置）的样式，不会出现动画结束后突然跳回初始状态的问题。
实例2：循环旋转加载动画
加载动画是网页中非常常见的场景，我们可以用@keyframes实现一个简单的旋转加载效果，动画会无限循环播放。
HTML结构只需要一个加载图标元素：
<div class="loading"></div>
CSS部分先定义旋转动画，让元素从0度旋转到360度，然后绑定到.loading元素上，设置动画持续时间为1.2秒，速度曲线为线性（保证旋转速度均匀），无限循环播放：
/* 定义旋转动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading {
width: 40px;
height: 40px;
border: 4px solid #e5e5e5;
/* 设置右侧边框为蓝色，形成半圆效果 */
border-right-color: #409eff;
border-radius: 50%;
/* 绑定旋转动画：无限循环 */
animation: rotate 1.2s linear infinite;
}这个加载动画的原理是通过border属性画出圆形边框，只给右侧边框设置高亮颜色，再让整个元素持续旋转，就会形成常见的旋转加载视觉效果。
实例3：进度条加载动画
我们再实现一个进度条从0%到100%的加载动画，模拟数据加载的过程。
HTML结构包含一个进度条容器和内部的进度条元素：
<div class="progress-container"> <div class="progress-bar"></div> </div>
CSS部分先定义进度条宽度变化的动画，从0%宽度增长到100%宽度，然后绑定到.progress-bar元素上，设置持续时间为3秒，播放1次后保持结束状态：
/* 定义进度条增长动画 */
@keyframes progress {
from {
width: 0%;
}
to {
width: 100%;
}
}
.progress-container {
width: 300px;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: #67c23a;
border-radius: 10px;
/* 绑定进度条动画 */
animation: progress 3s ease-in-out 0s 1 forwards;
}这里给进度条容器设置overflow: hidden，是为了让进度条元素宽度变化时不会超出容器的圆角范围，保证视觉效果完整。
注意事项
- @keyframes定义的动画名称不要和CSS其他属性名称冲突，建议使用有意义的命名，比如fadeIn、slideOut等。
- 如果需要在动画中途暂停，可以使用animation-play-state属性，设置为paused即可暂停，设置为running恢复播放。
- 旧版本浏览器（如IE9及以下）不支持@keyframes规则，如果需要兼容旧浏览器，需要额外添加前缀或者使用JavaScript动画替代。
- 当元素设置display: none时，绑定的动画不会执行，如果需要隐藏元素但保留动画，可以使用visibility属性配合opacity属性实现。