css3动画制作

CSS3 动画基础

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

定义关键帧

@keyframes example {
  0% { background-color: red; }
  50% { background-color: yellow; }
  100% { background-color: green; }
}

• 0% 表示动画开始状态，100% 表示结束状态，中间可添加任意百分比（如 50%）。

应用动画

div {
  animation-name: example;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

常用动画属性

• animation-name：指定 @keyframes 名称。
• animation-duration：动画时长（如 2s）。
• animation-timing-function：速度曲线（ease、linear、cubic-bezier()）。
• animation-delay：动画开始前的延迟时间。
• animation-iteration-count：播放次数（infinite 表示无限循环）。
• animation-direction：播放方向（normal、reverse、alternate）。
• animation-fill-mode：动画结束后的样式状态（forwards 保留最后一帧）。

简写语法

div {
  animation: example 3s ease-in-out 1s infinite alternate;
}

顺序为：name duration timing-function delay iteration-count direction。

实际示例：淡入淡出效果

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

.element {
  animation: fadeInOut 2s linear infinite;
}

进阶技巧

多动画组合
一个元素可同时应用多个动画：

div {
  animation: fadeInOut 2s, rotate 3s linear infinite;
}

使用 transform 实现复杂动画
结合 transform 属性实现旋转、缩放等效果：

@keyframes spinAndScale {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1.5); }
}

性能优化

• 优先使用 opacity 和 transform（硬件加速性能更好）。
• 避免频繁触发重排（如修改 width、margin）。

浏览器兼容性

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

  @-webkit-keyframes example { ... }
  .element {
  -webkit-animation: example 3s;
  }