css3动画制作心得

css3动画制作心得

关键帧动画（@keyframes）
使用@keyframes定义动画序列，通过百分比或from/to指定关键帧状态。动画属性需在目标元素中通过animation调用。例如：

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

过渡效果（transition）
适用于简单的状态变化，如悬停效果。需指定过渡属性、持续时间和缓动函数：

.button {
  background: blue;
  transition: background 0.3s ease;
}
.button:hover {
  background: red;
}

性能优化
优先使用transform和opacity属性，它们可通过GPU加速。避免频繁触发重排（如修改width/height）。使用will-change提示浏览器优化：

.element {
  will-change: transform;
}

缓动函数（easing）
内置缓动函数如ease-in-out，或通过cubic-bezier()自定义曲线。工具如Lea Verou的缓动函数工具可辅助调试。

动画控制
通过JavaScript动态控制动画：

element.style.animationPlayState = 'paused'; // 暂停
element.addEventListener('animationend', () => {
  console.log('动画结束');
});

响应式设计适配
使用媒体查询调整动画参数，确保在不同设备上流畅运行：

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

常见问题

• 动画闪烁：添加backface-visibility: hidden;。
• 重复播放：设置animation-iteration-count: infinite;。
• 延迟启动：利用animation-delay。

工具推荐

• Animate.css：预定义动画库。
• GreenSock（GSAP）：复杂动画解决方案。