css动漫制作

CSS动画制作基础

CSS动画通过@keyframes和animation属性实现。定义关键帧后，将其绑定到元素上并设置持续时间、延迟等参数。

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

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

常用动画属性

animation是以下子属性的简写：

• animation-name: 指定@keyframes名称
• animation-duration: 动画持续时间（如3s）
• animation-timing-function: 速度曲线（ease,linear等）
• animation-delay: 开始前延迟
• animation-iteration-count: 播放次数（infinite表示循环）
• animation-direction: 播放方向（alternate表示往返）

多关键帧动画

在@keyframes中可以设置多个中间状态：

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

动画组合

通过逗号分隔可同时应用多个动画：

.element {
  animation: fadeIn 2s, bounce 1s 2s;
}

性能优化建议

优先使用transform和opacity属性，这些属性不会触发重排：

• 避免动画中使用width/height/margin等
• 使用will-change: transform;提示浏览器优化
• 对移动设备减少复杂动画

动画事件监听

JavaScript可监听动画事件：

• animationstart: 动画开始
• animationend: 动画结束
• animationiteration: 每次循环触发

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

浏览器兼容性

所有现代浏览器均支持CSS动画。对于老旧浏览器需加前缀：

@-webkit-keyframes example { /*...*/ }
.element {
  -webkit-animation: example 2s;
          animation: example 2s;
}