css animation的关键帧通过@keyframes规则定义，用来指定动画在对应时间节点的元素样式，从而让元素在动画周期内产生连续的样式变化效果。
@keyframes基础语法
@keyframes后面跟着关键帧的名称，内部通过百分比或者关键词定义不同时间点的样式，百分比表示动画进度的占比，0%对应动画开始，100%对应动画结束，也可以用from代替0%，to代替100%。
/* 定义名为move的关键帧 */
@keyframes move {
from {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
to {
transform: translateX(200px);
}
}
给元素应用关键帧动画
定义好关键帧之后，需要通过animation相关属性将动画绑定到目标元素上，核心属性包括animation-name指定关键帧名称，animation-duration指定动画持续时间。
/* 给类名为box的元素应用move动画，持续2秒 */
.box {
width: 100px;
height: 100px;
background: #409eff;
animation-name: move;
animation-duration: 2s;
}
关键帧常用配置说明
除了基础的样式定义，关键帧还可以配合多个动画属性实现更丰富的效果，以下是常用的配置项说明：
| 属性名 | 作用 | 示例值 |
|---|---|---|
| animation-timing-function | 设置动画的速度曲线 | ease-in-out、linear |
| animation-delay | 设置动画延迟执行时间 | 0.5s、1s |
| animation-iteration-count | 设置动画循环次数 | infinite、3 |
| animation-direction | 设置动画播放方向 | alternate、reverse |
完整示例：循环缩放动画
下面是一个完整的关键帧动画示例，实现元素循环缩放的效果，动画持续1.5秒，无限循环，并且来回播放。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 定义缩放关键帧 */
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.scale-box {
width: 80px;
height: 80px;
background: #f56c6c;
border-radius: 8px;
/* 应用动画 */
animation-name: scale;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
</head>
<body>
<div class="scale-box"></div>
</body>
</html>
注意事项
- 关键帧名称需要符合css标识符规则，不能包含特殊字符，建议用小写字母加连字符命名。
- 如果关键帧中只定义了0%和100%的样式，也可以简写为from和to的形式，代码更简洁。
- 当多个关键帧设置相同百分比的样式时，后面的定义会覆盖前面的定义。
- 如果动画没有指定animation-duration，默认值为0，动画不会执行。
css_animationkeyframes动画关键帧过渡效果修改时间：2026-06-19 14:57:23