css3 动画制作

CSS3 动画基础

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

关键帧定义示例：

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

动画应用示例：

.element {
  animation: fadeIn 2s ease-in-out infinite;
}

常用动画属性

1. animation-name
   指定 @keyframes 的名称（如 fadeIn）。
2. animation-duration
   动画持续时间（如 2s）。
3. animation-timing-function
   速度曲线（如 ease、linear、cubic-bezier()）。
4. animation-delay
   动画开始前的延迟（如 1s）。
5. animation-iteration-count
   播放次数（如 infinite 或数值 3）。
6. animation-direction
   播放方向（如 alternate 表示来回播放）。

简写语法：

.element {
  animation: name duration timing-function delay iteration-count direction;
}

复杂关键帧示例

定义多阶段动画：

@keyframes slideAndColor {
  0% { transform: translateX(0); background: red; }
  50% { transform: translateX(100px); background: blue; }
  100% { transform: translateX(0); background: green; }
}

应用动画：

.box {
  animation: slideAndColor 3s ease infinite alternate;
}

动画性能优化

• 使用 transform 和 opacity 属性，这些属性可通过GPU加速。
• 避免频繁触发重排（如修改 width、margin）。
• 使用 will-change 提示浏览器优化：

  .element {
    will-change: transform, opacity;
  }

实战示例：按钮悬停效果

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

.button:hover {
  animation: pulse 0.5s ease;
}

浏览器兼容性

• 现代浏览器（Chrome、Firefox、Edge、Safari）均支持CSS3动画。
• 前缀兼容（旧版本可能需要）：

  @-webkit-keyframes fadeIn { /* ... */ }
  .element {
    -webkit-animation: fadeIn 2s;
    animation: fadeIn 2s;
  }