animation-fill-mode 详细演示

什么是 animation-fill-mode？

animation-fill-mode 控制动画开始前和结束后元素的状态。它决定了元素在动画的"延迟期间"和"结束后"应该显示什么样式。

四种填充模式

• none - 默认值，延迟期间和结束后都不应用动画样式
• forwards - 动画结束后保持最后一帧的状态（最常用！）
• backwards - 延迟期间应用第一帧样式
• both - 结合 backwards 和 forwards 的效果

backwards 的作用对比

动画：从左侧（红色）滑到中间（绿色），有 2 秒延迟

.box {
  animation: slideFromLeft 1.5s ease-out 2s 1 none;
  /* 延迟期间保持原始状态 */
}

.box {
  animation: slideFromLeft 1.5s ease-out 2s 1 backwards;
  /* 延迟期间立即应用第一帧 */
}

forwards 的作用对比

动画：从中间（绿色）滑到右边（橙色半透明），有 2 秒延迟

.box {
  animation: slideToRight 1.5s ease-out 2s 1 none;
  /* 动画结束后回到原始状态 */
}

.box {
  animation: slideToRight 1.5s ease-out 2s 1 forwards;
  /* 动画结束后保持最后一帧 */
}

both = backwards + forwards

动画：从左侧（红色）滑到右边（橙色半透明），有 2 秒延迟

@keyframes slideLeftToRight {
  from {
    transform: translate(-250%, -50%);
    background: var(--error);
  }
  to {
    transform: translate(150%, -50%);
    background: var(--warning);
    opacity: 0.3;
  }
}

.box {
  animation: slideLeftToRight 1.5s ease-out 2s 1 both;
}

/* 动画定义 */
@keyframes slideFromLeft {
  from {
    transform: translate(-250%, -50%); /* 在左边 */
    background: #ef4444; /* 红色 */
  }
  to {
    transform: translate(-50%, -50%); /* 在中间 */
    background: #10b981; /* 绿色 */
  }
}

/* 应用动画 */
.box {
  animation: slideFromLeft 1.5s ease-out 2s 1 backwards;
  /* 动画名 时长 缓动 延迟 次数 填充模式 */
}

详细语法说明

/* 假设动画定义：从透明到不透明 */
@keyframes fadeOut {
  from { opacity: 0.2; } /* 第一帧：透明 */
  to { opacity: 1; } /* 最后一帧：不透明 */
}

/* 元素原始状态：不透明 */
.box {
  opacity: 1;
}

/* none: 延迟期间保持原始状态，结束后回到原始状态 */
.none {
  animation: fadeOut 1s linear 2s 1 none;
  /* 延迟 2 秒期间：opacity: 1（原始）
     动画播放：opacity: 0.2 → 1
     动画结束后：opacity: 1（原始）*/
}

/* backwards: 延迟期间立即应用第一帧 */
.backwards {
  animation: fadeOut 1s linear 2s 1 backwards;
  /* 延迟 2 秒期间：opacity: 0.2（第一帧！）
     动画播放：opacity: 0.2 → 1
     动画结束后：opacity: 1（原始）*/
}

/* forwards: 结束后保持最后一帧 */
.forwards {
  animation: fadeOut 1s linear 2s 1 forwards;
  /* 延迟 2 秒期间：opacity: 1（原始）
     动画播放：opacity: 0.2 → 1
     动画结束后：opacity: 1（最后一帧！）*/
}

/* both: 结合 backwards 和 forwards */
.both {
  animation: fadeOut 1s linear 2s 1 both;
  /* 延迟 2 秒期间：opacity: 0.2（第一帧！）
     动画播放：opacity: 0.2 → 1
     动画结束后：opacity: 1（最后一帧！）*/
}

总结与最佳实践