CSS动画关键帧

CSS关键帧动画通过 @keyframes 规则定义动画序列，实现比过渡更复杂的动画效果。

@keyframes 语法

基本结构

@keyframes animation-name {
  0% { /* 起始状态 */ }
  100% { /* 结束状态 */ }
}

关键帧标识

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 等价于 */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

多关键帧定义

@keyframes bounce {
  0% { transform: translateY(0); }
  25% { transform: translateY(-20px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

关键帧百分比表示动画时间轴上的时间点，0%为开始，100%为结束。

多属性动画

@keyframes complex-animation {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
  }
  50% {
    opacity: 1;
    transform: scale(1.1) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

关键帧特性

属性叠加

未定义的属性保持原值或使用CSS默认值：

.box {
  width: 100px;
  height: 100px;
  background: red;
}

@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
  /* width、height、background 保持不变 */
}

重复属性

后定义的值覆盖前面的值：

@keyframes example {
  0% { opacity: 0; }
  0% { opacity: 0.5; } /* 生效 */
}

!important 规则

关键帧中的 !important 会被忽略：

@keyframes example {
  0% { opacity: 0 !important; } /* !important 无效 */
}

常用动画示例

淡入淡出

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

旋转

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

弹跳

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

脉冲

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

摇晃

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

应用关键帧

.element {
  animation: bounce 1s ease infinite;
}

关键帧定义动画序列，通过 animation 属性应用到元素上。

要点总结

• @keyframes 定义动画序列，from/to 等价于 0%/100%
• 多关键帧可精细控制动画每个阶段
• 未定义属性保持原值不变
• 关键帧中 !important 无效
• 常用动画：淡入淡出、旋转、弹跳、脉冲、摇晃