CSS动画制作技巧

CSS动画基础语法

使用@keyframes定义动画关键帧，通过animation属性绑定到元素：

@keyframes slide-in {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
.element {
  animation: slide-in 1s ease-out forwards;
}

animation是以下属性的简写：

• animation-name：关键帧名称
• animation-duration：动画时长（如2s）
• animation-timing-function：缓动函数（如ease-in-out）
• animation-delay：延迟启动时间
• animation-iteration-count：重复次数（infinite表示无限循环）
• animation-direction：播放方向（alternate可来回播放）
• animation-fill-mode：结束状态保留（forwards保留最后一帧）

性能优化技巧

优先使用transform和opacity属性触发GPU加速，避免重排（reflow）：

.box {
  transform: scale(1.2); /* 使用transform替代width/height变化 */
  opacity: 0.8; /* 透明度动画性能开销低 */
}

启用硬件加速可添加：

.accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
}

复杂动画组合

通过逗号分隔实现多动画同步：

.element {
  animation: 
    fade-in 0.5s ease-out,
    rotate 2s linear infinite;
}
@keyframes fade-in { /* 淡入效果 */ }
@keyframes rotate { /* 旋转效果 */ }

响应式动画控制

使用CSS变量动态调整参数：

:root {
  --anim-duration: 1s;
}
.element {
  animation-duration: var(--anim-duration);
}

通过JavaScript控制动画播放：

element.style.animationPlayState = 'paused'; // 暂停动画

实用效果示例

悬浮放大效果：

.card:hover {
  transform: scale(1.05);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

无限脉冲动画：

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.pulse {
  animation: pulse 2s infinite;
}

调试工具

Chrome DevTools的Animations面板可录制和慢放动画，检查关键帧时间和缓动曲线。