animation关键帧的定义

在CSS动画中，关键帧（@keyframes）是定义动画序列的核心规则。它允许开发者精确控制动画在不同时间点的样式状态，从而实现复杂的动态效果。

关键帧的基本语法

@keyframes规则由动画名称和一组关键帧选择器（百分比或from/to）组成。基本语法结构如下：

@keyframes animation-name {
  0% {
    /* 初始状态样式 */
  }
  50% {
    /* 中间状态样式 */
  }
  100% {
    /* 结束状态样式 */
  }
}

其中：

• animation-name是自定义的动画标识符
• 百分比值表示动画进度的关键时间点（0%代表开始，100%代表结束）
• 可以使用from（等价于0%）和to（等价于100%）简化写法

关键帧选择器的使用方式

关键帧选择器支持多种定义方式：

1. 两状态动画（开始和结束）

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

2. 多阶段动画

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

3. 非均匀时间分布

@keyframes progress {
  0% {
    width: 0;
  }
  30% {
    width: 50%;
  }
  70% {
    width: 80%;
  }
  100% {
    width: 100%;
  }
}

关键帧的样式规则

在关键帧块内可以定义任何有效的CSS属性，但需要注意：

1. 可动画属性：只有支持过渡的属性才能产生动画效果
2. 继承规则：未指定的属性将使用元素原有样式或前一关键帧的值
3. 重要声明：!important在关键帧中会被忽略

@keyframes colorChange {
  0% {
    background-color: red;
    transform: scale(1);
  }
  50% {
    background-color: yellow;
    /* transform属性未指定，将保持scale(1) */
  }
  100% {
    background-color: green;
    transform: scale(1.5);
  }
}

关键帧的组合使用

多个动画可以通过逗号分隔同时应用到一个元素：

.element {
  animation: fadeIn 2s, bounce 1.5s infinite;
}

关键帧的高级特性

1. 重复定义处理

如果同一个关键帧百分比被多次定义，最后出现的规则会覆盖之前的：

@keyframes example {
  50% {
    color: red;
  }
  50% {
    color: blue; /* 最终生效 */
  }
}

2. 负百分比和超过100%的值

这些值会被视为0%或100%：

@keyframes example {
  -20% {
    /* 等同于0% */
  }
  120% {
    /* 等同于100% */
  }
}

3. 动态样式计算

可以在关键帧中使用CSS变量：

:root {
  --end-scale: 1.5;
}

@keyframes zoom {
  to {
    transform: scale(var(--end-scale));
  }
}

关键帧的实际应用示例

1. 加载动画

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: loading 1s linear infinite;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  width: 40px;
  height: 40px;
}

2. 打字机效果

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3.5s steps(40, end);
  border-right: 3px solid;
  animation: blink-caret 0.75s step-end infinite;
}

3. 复杂路径动画

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(100px, 50px);
  }
  50% {
    transform: translate(200px, 0);
  }
  75% {
    transform: translate(100px, -50px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.ball {
  animation: move 4s ease-in-out infinite;
  width: 20px;
  height: 20px;
  background-color: tomato;
  border-radius: 50%;
}

关键帧的性能优化

1. 优先使用transform和opacity：这些属性可以由合成器线程处理，不会触发重排
2. 避免在关键帧中修改盒模型属性：如width、height、padding等
3. 减少关键帧数量：过多的关键帧会增加计算负担
4. 使用will-change：提前告知浏览器元素将要变化

.optimized {
  will-change: transform, opacity;
  animation: smoothMove 2s ease;
}

@keyframes smoothMove {
  to {
    transform: translateX(100px);
    opacity: 0.5;
  }
}

关键帧的浏览器兼容性

现代浏览器对@keyframes的支持良好，但需要注意：

1. 需要前缀的旧版浏览器：

@-webkit-keyframes {}
@-moz-keyframes {}
@-o-keyframes {}

2. 检测支持度的现代写法：

@supports (animation-name: test) {
  /* 支持关键帧动画的样式 */
}

关键帧与JavaScript交互

可以通过JavaScript动态创建和修改关键帧：

// 创建样式表
const styleSheet = document.createElement("style");
document.head.appendChild(styleSheet);

// 添加关键帧规则
styleSheet.sheet.insertRule(`
  @keyframes dynamicAnimation {
    0% { transform: translateX(0); }
    100% { transform: translateX(${window.innerWidth - 100}px); }
  }
`, 0);

// 应用动画
element.style.animation = "dynamicAnimation 2s";