前端CSS动画制作

CSS动画基础

CSS动画通过@keyframes规则定义动画序列，结合animation属性控制播放。以下是一个基础示例：

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

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

关键属性说明

• @keyframes：定义动画阶段（如from/to或百分比0%/50%/100%）。
• animation：简写属性，包含以下子属性：
  • animation-name：绑定@keyframes名称。
  • animation-duration：动画时长（如2s）。
  • animation-timing-function：速度曲线（如ease、linear）。
  • animation-delay：延迟启动时间。
  • animation-iteration-count：重复次数（infinite表示无限循环）。
  • animation-direction：播放方向（如alternate往返播放）。

常见动画效果示例

淡入淡出

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.fade-element {
  animation: fade 1.5s ease-in;
}

平移效果

@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.slide-element {
  animation: slide 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

旋转缩放

@keyframes spin {
  0% { transform: rotate(0deg) scale(0.5); }
  100% { transform: rotate(360deg) scale(1); }
}
.spin-element {
  animation: spin 2s linear infinite;
}

性能优化建议

• 优先使用transform和opacity属性，它们不会触发重排（reflow），性能更高。
• 避免频繁修改width、height或margin等属性。
• 使用will-change提示浏览器优化（如will-change: transform;）。

响应式动画适配

通过媒体查询调整动画参数：

@media (max-width: 768px) {
  .element {
    animation-duration: 1s; /* 移动端缩短动画时间 */
  }
}

工具与框架推荐

• Animate.css：预置动画库，直接添加类名即可使用（如animate__fadeIn）。
• GreenSock (GSAP)：高级动画库，适合复杂交互场景。
• CSS Tricks 和 CodePen：参考社区案例快速实现效果。

通过组合关键帧和动画属性，可以灵活实现从简单过渡到复杂交互的视觉效果。