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）：复杂动画解决方案。
