css动画制作步骤

定义动画关键帧

使用 @keyframes 规则定义动画的起始和结束状态。关键帧通过百分比或 from/to 关键字描述动画过程中的样式变化。例如：

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

应用动画到元素

通过 animation 属性将动画绑定到目标元素。需指定动画名称、持续时间、速度曲线等参数：

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

配置动画属性

调整动画的细节行为，如重复次数、方向、延迟等：

• animation-iteration-count: 控制播放次数（如 infinite 无限循环）。
• animation-direction: 设置反向播放（如 alternate 来回交替）。
• animation-delay: 延迟动画开始时间。

使用贝塞尔曲线控制速度

通过 animation-timing-function 定义动画加速度。内置选项包括 ease、linear，或自定义贝塞尔曲线：

.element {
  animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

监听动画事件

通过 JavaScript 监听动画开始、结束或重复事件，实现交互逻辑：

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

硬件加速优化

对移动端或高性能动画，使用 transform 和 opacity 属性触发 GPU 加速：

.element {
  transform: translateZ(0);
}

响应式动画设计

结合媒体查询适配不同屏幕尺寸，调整动画参数：

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