css3 动画制作

CSS3 动画基础

CSS3 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式（如时长、延迟、循环等）。

定义关键帧

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

• from 和 to 分别表示动画的起始和结束状态。
• 也可使用百分比（如 0%、50%、100%）定义多阶段动画。

应用动画

.element {
  animation: slideIn 1s ease-in-out 0.5s 3 alternate;
}

• slideIn：动画名称。
• 1s：动画持续时间。
• ease-in-out：速度曲线（缓动效果）。
• 0.5s：延迟时间。
• 3：播放次数（infinite 表示无限循环）。
• alternate：方向交替（可选）。

常用动画属性

• animation-name：关键帧名称。
• animation-duration：动画时长（如 2s）。
• animation-timing-function：缓动函数（如 linear、ease）。
• animation-delay：延迟启动时间。
• animation-iteration-count：循环次数。
• animation-direction：播放方向（normal、reverse、alternate）。
• animation-fill-mode：动画结束后的样式保留（如 forwards）。

示例：

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

复合动画

通过组合多个属性实现复杂效果：

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.button {
  animation: pulse 1.5s infinite;
}

• 同时改变 transform（缩放）和 opacity（透明度）。

性能优化建议

• 优先使用 transform 和 opacity，这两个属性不会触发重排（reflow），性能更高。
• 避免频繁触发重绘的属性，如 box-shadow 或 border-radius。
• 使用 will-change 提示浏览器优化：

  .element {
    will-change: transform;
  }

实际案例：悬停动画

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

.icon:hover {
  animation: rotate 0.5s linear;
}

• 鼠标悬停时触发旋转动画。

通过灵活组合关键帧和动画属性，可以实现丰富的交互效果，如淡入淡出、滑动、旋转等。