css3动画制作

CSS3 动画基础

CSS3 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画关键帧，animation 控制动画播放方式。

定义关键帧

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

或使用百分比定义多阶段动画：

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

应用动画

通过 animation 属性绑定动画到元素：

.element {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

简写形式：

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

常用动画属性

• animation-name：指定 @keyframes 名称。
• animation-duration：动画持续时间（如 2s）。
• animation-timing-function：速度曲线（ease、linear、cubic-bezier()）。
• animation-delay：动画延迟启动时间。
• animation-iteration-count：播放次数（1、infinite）。
• animation-direction：播放方向（normal、reverse、alternate）。
• animation-fill-mode：动画结束后状态（forwards 保留最后一帧）。

示例：悬停放大效果

.button {
  transition: transform 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
}

复合动画

结合多个属性实现复杂效果：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.box {
  animation: bounce 1s infinite, fadeIn 2s;
}

性能优化建议

• 优先使用 transform 和 opacity，它们不会触发重排（性能开销小）。
• 避免频繁触发动画（如 width、margin 变化）。
• 使用 will-change: transform; 提示浏览器优化。

通过灵活组合关键帧和动画属性，可实现过渡、旋转、缩放等动态效果。