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('动画结束');
});
