CSS 动画
03-css2026/11/14
CSS 动画允许元素在一段时间内从一个状态平滑地过渡到另一个或多个状态，不需要 JavaScript。
CSS 动画由两部分组成：
@keyframes—— 定义动画过程animation属性 —— 控制动画的播放方式
@keyframes 规则
定义动画的关键帧序列。
/* 基础语法 */
@keyframes animation-name {
from {
/* 起始状态 */
}
to {
/* 结束状态 */
}
}
/* 百分比语法 推荐 */
@keyframes animation-name {
0% {
/* 状态 */
}
50% {
/* 状态 */
}
100% {
/* 状态 */
}
}
/* 示例 */
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes colorChange {
0% {
background-color: red;
}
33% {
background-color: yellow;
}
66% {
background-color: blue;
}
100% {
background-color: green;
}
}
Animation 属性
简写语法：
.element {
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
/* 简写 */
.box {
animation: move 2s ease-in-out 0s infinite alternate;
}
/* 单个属性写法 */
.box {
animation-name: move;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
animation-play-state: running;
}
详细属性
animation-name
指定要使用的@keyframes名称。
animation-name: slideIn;
animation-duration
动画完成一个周期所需时间。
animation-duration: 2s; /* 2秒 */
animation-duration: 500ms; /* 500毫秒 */
animation-timing-function
动画的速度曲线。
animation-timing-function: ease; /* 默认 */
animation-timing-function: linear; /* 匀速 */
animation-timing-function: ease-in; /* 慢开始 */
animation-timing-function: ease-out; /* 慢结束 */
animation-timing-function: ease-in-out; /* 慢开始和结束 */
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1); /* 自定义 */
animation-timing-function: steps(4, jump-start); /* 步进动画 */