利用css3制作动画

CSS3 动画基础

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

定义关键帧

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

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

应用动画

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

• 简写属性 animation 包含以下值（按顺序）：
  • slide-in: 动画名称。
  • 1s: 持续时间。
  • ease-in-out: 速度曲线（缓动函数）。
  • 0.5s: 延迟时间。
  • 3: 循环次数（infinite 表示无限循环）。
  • alternate: 方向（往返播放）。

常用动画属性

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

示例：淡入效果

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-element {
  animation: fade-in 2s ease-out forwards;
}

复杂动画：多关键帧

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

.ball {
  animation: bounce 0.5s infinite;
}

性能优化建议

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

浏览器兼容性

• 现代浏览器均支持 CSS3 动画，旧版本需加前缀（如 -webkit-, -moz-）。可通过工具（如 Autoprefixer）自动生成。