动画css制作

动画CSS制作方法

CSS动画通过@keyframes和animation属性实现动态效果，适用于元素的状态变化和复杂交互。

关键帧定义

使用@keyframes定义动画序列，指定从开始到结束的样式变化：

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

动画属性应用

通过animation将关键帧绑定到元素并配置参数：

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

参数依次为：动画名称、持续时间、缓动函数、延迟、填充模式。

复合属性分解

• animation-name: 指定@keyframes名称
• animation-duration: 动画周期（如2s）
• animation-timing-function: 速度曲线（ease/linear/cubic-bezier()）
• animation-delay: 启动延迟
• animation-iteration-count: 播放次数（infinite表示循环）
• animation-direction: 播放方向（alternate反向交替）
• animation-fill-mode: 结束状态保持（forwards保留最后一帧）

多阶段动画示例

定义百分比关键帧实现复杂序列：

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

硬件加速优化

使用transform和opacity属性触发GPU加速：

.optimized {
  will-change: transform;
  transform: translateZ(0);
}

响应式动画控制

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

@media (max-width: 768px) {
  .element {
    animation-duration: 0.5s;
  }
}

动画事件监听

JavaScript可监听动画生命周期：

element.addEventListener('animationend', () => {
  console.log('动画结束');
});

性能注意事项

• 避免频繁触发重排的属性（如width/left）
• 简化复杂选择器以减少样式计算
• 使用requestAnimationFrame同步动画帧率

现代CSS特性

• @media (prefers-reduced-motion)适配系统动画偏好
• CSS Houdini实现自定义动画效果
• scroll-timeline实现滚动驱动动画

实际应用案例

淡入效果

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

旋转加载动画

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader {
  animation: spin 1s linear infinite;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #3498db;
}

悬停交互动画

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

关键帧链式动画

@keyframes multiStep {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { transform: scale(1); }
}

调试技巧

• Chrome DevTools的Animation面板可实时编辑和捕获动画
• 使用animation-play-state: paused调试具体帧
• 通过steps()函数实现帧动画效果

浏览器兼容方案

.element {
  -webkit-animation: slideIn 1s; /* 旧版Webkit */
  animation: slideIn 1s;
}
@-webkit-keyframes slideIn { ... }
@keyframes slideIn { ... }