css动画制作
CSS动画基础语法
CSS动画通过@keyframes规则定义动画序列，结合animation属性实现动态效果。以下是一个基础示例：
@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: green;}
}
.element {
animation: example 3s infinite;
}关键帧定义
使用@keyframes规则指定动画过程中的样式变化。百分比表示动画进度的关键节点：
@keyframes slidein {
from { transform: translateX(0%); }
to { transform: translateX(100%); }
}动画属性配置
animation是以下子属性的简写：
animation-name: 指定@keyframes名称animation-duration: 动画周期时长（如2s）animation-timing-function: 速度曲线（ease/linear等）animation-delay: 开始前延迟animation-iteration-count: 播放次数（infinite表示无限循环）animation-direction: 播放方向（alternate表示往返播放）animation-fill-mode: 设置动画结束后的状态
缓动函数控制
通过animation-timing-function调整运动曲线：
.element {
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}多动画组合
一个元素可同时应用多个动画：
.box {
animation:
fadeIn 0.5s ease-out,
slideUp 1s ease-in-out 0.5s;
}性能优化建议
优先使用transform和opacity属性制作动画，这些属性不会触发重排：
@keyframes optimize {
to {
transform: rotate(360deg);
opacity: 0.5;
}
}浏览器兼容处理
添加厂商前缀确保兼容性：
.element {
-webkit-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}动画事件监听
通过JavaScript监听动画事件：
const el = document.querySelector('.animated');
el.addEventListener('animationend', () => {
console.log('动画结束');
});
