animation关键帧的定义

animation关键帧的定义

在CSS动画中，关键帧（keyframes）是定义动画序列中特定时间点样式状态的核心机制。通过@keyframes规则，开发者可以精确控制元素在不同动画阶段的样式变化，实现从开始到结束的复杂动画效果。

关键帧的基本语法结构

@keyframes规则由动画名称和一组关键帧选择器组成，每个选择器对应动画过程中的特定时间点。基本语法如下：

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

百分比值表示动画完成的时间比例，0%对应动画开始时刻，100%对应动画结束时刻。也可以使用from和to关键字替代0%和100%：

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

关键帧的时间点设置

关键帧的时间点可以灵活设置，支持多个中间状态。例如创建一个弹跳效果：

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

时间点不必均匀分布，可以根据动画需求任意设置。以下示例展示了一个非均匀时间分布的关键帧定义：

@keyframes flash {
  0%, 35%, 65%, 85%, 100% {
    opacity: 1;
  }
  25%, 50%, 75%, 95% {
    opacity: 0.2;
  }
}

关键帧中的样式属性

关键帧中可以包含任何可动画的CSS属性。以下示例同时改变多个属性：

@keyframes multi-property {
  0% {
    transform: scale(0.5);
    background-color: red;
    border-radius: 0;
  }
  50% {
    transform: scale(1.2);
    background-color: yellow;
  }
  100% {
    transform: scale(1);
    background-color: green;
    border-radius: 50%;
  }
}

注意并非所有CSS属性都可以动画化。通常只有数值型属性（如宽度、透明度）或可插值的属性（如颜色）才能产生动画效果。

关键帧的重复定义

当多个关键帧规则定义相同的百分比时，后面的规则会覆盖前面的规则。这在需要覆盖第三方动画时很有用：

@keyframes override-example {
  50% {
    transform: rotate(0deg);
  }
  /* 后面的规则会覆盖前面的 */
  50% {
    transform: rotate(180deg);
  }
}

关键帧与动画属性的结合

定义好的关键帧需要通过animation属性应用到元素上。完整的动画配置包括：

.element {
  animation: 
    slide-in 1.5s ease-in-out 0.5s infinite alternate;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

关键帧的高级用法

步进动画

使用steps()函数可以实现帧动画效果：

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

.typing-text {
  animation: typing 3s steps(40, end);
}

动画暂停与恢复

通过JavaScript可以动态控制关键帧动画：

const element = document.querySelector('.animated');
element.style.animationPlayState = 'paused';

// 恢复动画
element.style.animationPlayState = 'running';

多重动画叠加

一个元素可以同时应用多个关键帧动画：

.box {
  animation: 
    spin 4s linear infinite,
    pulse 2s ease-in-out infinite;
}

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

关键帧的性能考量

某些属性动画会触发重排（reflow）或重绘（repaint），影响性能。优先使用以下高性能属性：

@keyframes optimal {
  to {
    transform: translate3d(0, 0, 0);
    opacity: 0;
    filter: blur(5px);
  }
}

避免动画下列属性：

• width/height
• margin/padding
• top/left/right/bottom

关键帧的浏览器前缀

为确保兼容性，有时需要添加浏览器前缀：

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

现代构建工具如Autoprefixer可以自动处理这类问题。

关键帧在响应式设计中的应用

结合媒体查询，可以创建响应式关键帧动画：

@media (max-width: 768px) {
  @keyframes mobile-slide {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
  }
  .menu {
    animation: mobile-slide 0.3s ease-out;
  }
}

动态修改关键帧

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

const styleSheet = document.styleSheets[0];
styleSheet.insertRule(`
  @keyframes dynamic {
    0% { background: white; }
    100% { background: black; }
  }
`, styleSheet.cssRules.length);

document.querySelector('.box').style.animation = 'dynamic 2s';