css动画制作效果

CSS 动画基础语法

CSS 动画通过 @keyframes 规则定义动画序列，再通过 animation 属性将动画应用到元素上。

定义关键帧：

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

应用动画：

.element {
  animation: slideIn 1s ease-in-out;
}

常用动画属性

• animation-name：指定 @keyframes 名称。
• animation-duration：动画持续时间（如 2s）。
• animation-timing-function：速度曲线（如 ease、linear）。
• animation-delay：动画延迟启动时间。
• animation-iteration-count：播放次数（infinite 表示无限循环）。
• animation-direction：播放方向（如 alternate 来回播放）。

示例：

.box {
  animation: bounce 0.5s ease-in-out 0.5s infinite alternate;
}

常见动画效果示例

淡入效果：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1s;
}

缩放动画：

@keyframes scale {
  0% { transform: scale(0.5); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.scale-effect {
  animation: scale 0.8s;
}

旋转动画：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 2s linear infinite;
}

复合动画

通过组合多个变换实现复杂效果：

@keyframes moveAndFade {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.combo-animation {
  animation: moveAndFade 1.5s ease-out;
}

性能优化建议

• 优先使用 transform 和 opacity，这些属性不会触发重排（性能开销小）。
• 避免过度使用高频率动画（如每秒多次触发）。
• 使用 will-change 提示浏览器优化：

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

通过灵活组合关键帧和动画属性，可以实现丰富的交互效果。