使用@keyframes定义动画关键帧并应用animation属性实现CSS动画效果，如slideIn滑入、pulse脉冲等，通过设置持续时间、缓动函数、延迟和填充模式等参数控制动画行为。
在 CSS 中，使用 @keyframes 可以为元素创建动画效果。它定义了动画过程中的关键帧，也就是动画在不同时间点的样式状态。
1. 定义 @keyframes 动画
使用 @keyframes 后跟一个动画名称，然后在花括号中设置各个关键帧（如 0%、50%、100% 或 from/to）对应的样式：
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
上面的例子定义了一个名为 slideIn 的动画：元素从左侧外（左移100%自身宽度）滑动到正常位置。
2. 将动画应用到元素
通过 animation 属性把定义好的动画绑定到某个元素上：
立即学习“前端免费学习笔记（深入）”；
.animated-box {
width: 100px;
height: 100px;
background-color: blue;
animation: slideIn 2s ease-in-out 0.5s forwards;
}
这里 animation 的参数依次是：
- 动画名称：对应 @keyframes 定义的名字
- 持续时间：2秒完成动画
- 缓动函数：ease-in-out 表示先慢后快再慢
- 延迟时间：0.5秒后开始
- 填充模式：forwards 表示动画结束后保持最后一帧的样式
3. 使用百分比设置多关键帧
你可以用百分比精确控制动画过程中的多个状态：
@keyframes pulse {
0% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0.5;
transform: scale(1);
}
}
这个脉冲动画会让元素先放大变不透明，再恢复原样，适合做提示效果。
4. 常用 animation 属性简写或单独设置
除了简写的 animation，也可以单独设置属性：
- animation-duration：动画持续时间
- animation-timing-function：速度曲线
- animation-delay：延迟启动
- animation-iteration-count：播放次数（可设数字或 infinite）
- animation-direction：播放方向（如 reverse, alternate）
- animation-fill-mode：动画外时间的样式（如 backwards, both）
- animation-play-state：控制暂停（paused）或运行（running）
基本上就这些。只要定义好关键帧，再应用到元素上，就能实现流畅的 CSS 动画。注意浏览器兼容性，一般现代浏览器都支持，必要时可加 -webkit- 前缀。
