css animation与keyframes多阶段动画控制-css教程-PHP中文网

css animation与keyframes多阶段动画控制

P粉602998670

发布： 2025-10-14 15:12:02

原创

876人浏览过

使用@keyframes定义关键帧并结合animation属性可实现多阶段动画。1. @keyframes设置0%、50%、100%等关键状态，描述样式变化过程；2. animation将动画应用到元素，控制时长、延迟、重复等行为；3. 通过百分比划分阶段，明确各节点样式，如平移、变色、旋转；4. 可在关键帧内设置animation-timing-function，实现不同阶段的缓动效果，如ease-in后ease-out；5. 使用animation-fill-mode保留最终状态，animation-iteration-count控制循环次数。合理分配时间比例与缓动函数，能精准控制动画节奏，提升视觉表现。

css animation与keyframes多阶段动画控制

在CSS中，使用@keyframes配合animation属性可以实现多阶段动画控制。这种方式不仅灵活，还能精确控制元素在不同时间点的样式变化。

理解 keyframes 与 animation 的关系

@keyframes定义动画的关键帧，描述元素从一个状态到另一个状态的变化过程。animation则是将这些关键帧应用到具体元素上，并控制播放方式。

例如，让一个盒子先向右移动，再变色，最后旋转：

@keyframes multiStage {
  0%     { transform: translateX(0); background: red; }
  50%    { transform: translateX(100px); background: blue; }
  100%   { transform: translateX(100px) rotate(180deg); background: green; }
}

.box {
  width: 50px;
  height: 50px;
  background: red;
  animation: multiStage 3s ease-in-out;
}

登录后复制

在这个例子中，动画分三个阶段：0%-50%平移并变色，50%-100%继续旋转。关键帧百分比决定了每个状态的时间分布。

立即学习“前端免费学习笔记（深入）”；

拆分复杂动画为多个关键帧阶段

当需要更清晰的阶段划分时，可明确标注多个中间节点：

@keyframes stagedAnimation {
  0%   { opacity: 0; transform: scale(0.5); }
  33%  { opacity: 1; transform: scale(1); }
  66%  { background: orange; box-shadow: 0 0 20px gold; }
  100% { transform: scale(1.2) rotate(45deg); }
}

登录后复制

这种结构便于维护，每个阶段职责分明：入场、展示、高亮、结束动作。通过调整百分比，可以控制各阶段持续时间。

阶跃AI

阶跃星辰旗下AI智能问答搜索助手

291

查看详情

利用 animation-timing-function 实现阶段差异化缓动

单一的ease可能无法满足多阶段需求。可通过在关键帧中分别设置animation-timing-function来实现不同阶段的运动节奏：

@keyframes variedEasing {
  0%   { left: 0; animation-timing-function: ease-in; }
  50%  { left: 200px; animation-timing-function: ease-out; }
  100% { left: 100px; }
}

登录后复制

第一段加速前进，第二段缓慢回弹。注意：animation-timing-function写在关键帧内部，影响的是“从此帧到下一帧”的过渡曲线。

控制动画执行行为

通过animation复合属性或单独设置，可精细控制动画表现：

animation-duration：总时长，影响各阶段实际耗时
animation-delay：延迟启动，可用于序列化多个元素动画
animation-iteration-count：重复次数，如infinite
animation-fill-mode：决定动画外时间的状态，常用forwards保留最终态

例如：

.animated {
  animation: stagedAnimation 4s both infinite;
}

登录后复制

表示动画保持首尾状态（both），并无限循环。

基本上就这些。合理划分关键帧、分配时间比例、设置缓动函数，就能实现丰富而可控的多阶段动画效果。不复杂但容易忽略细节，比如百分比必须覆盖整个周期，否则浏览器会自动补全。

以上就是css animation与keyframes多阶段动画控制的详细内容，更多请关注php中文网其它相关文章！