css动画制作原理

CSS动画制作原理

CSS动画通过改变元素的样式属性实现动态效果，主要依赖关键帧（@keyframes）和动画属性（如animation-name、animation-duration）的配合。核心原理分为以下部分：

关键帧定义

通过@keyframes规则定义动画的中间状态。关键帧指定动画在不同时间点的样式变化，从0%（from）到100%（to）的百分比划分动画阶段：

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

动画属性绑定

将定义好的关键帧动画绑定到目标元素，并设置动画参数：

• animation-name: 指定关键帧名称（如fadeIn）。
• animation-duration: 设置动画持续时间（如2s）。
• animation-timing-function: 控制速度曲线（如ease-in-out）。
• animation-delay: 延迟动画开始时间。
• animation-iteration-count: 定义播放次数（infinite表示循环）。

  .element {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  }

硬件加速优化

通过触发GPU加速提升动画性能，常用方式为使用transform和opacity属性。这些属性不会引起重排或重绘：

@keyframes slide {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

复合动画

组合多个关键帧实现复杂效果。例如同时改变位置和透明度：

@keyframes moveAndFade {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(20px); opacity: 0.5; }
  100% { transform: translateY(0); opacity: 1; }
}

动画事件监听

通过JavaScript监听动画事件（如开始、结束）实现交互控制：

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