css中制作动画
CSS动画基础
CSS动画通过@keyframes规则和animation属性实现。定义关键帧后，将动画绑定到元素上。
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slideIn 1s ease-out;
}关键属性说明
animation是以下子属性的简写：
animation-name: 指定@keyframes名称animation-duration: 动画时长（如2s）animation-timing-function: 速度曲线（ease/linear/cubic-bezier）animation-delay: 延迟启动时间animation-iteration-count: 重复次数（infinite表示无限循环）animation-direction: 播放方向（normal/alternate/reverse）animation-fill-mode: 动画结束后样式（forwards/backwards）
多关键帧定义
可以在@keyframes中定义多个中间状态：
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}性能优化建议
优先使用transform和opacity属性制作动画，这些属性不会触发重排：
- 使用
will-change: transform提前告知浏览器优化 - 避免动画期间改变
width/height等几何属性 - 硬件加速：使用
transform: translateZ(0)
动画事件监听
通过JavaScript监听动画事件：
element.addEventListener('animationstart', () => {});
element.addEventListener('animationend', () => {});
element.addEventListener('animationiteration', () => {});实用示例
悬停放大效果：
.button {
transition: transform 0.3s;
}
.button:hover {
transform: scale(1.1);
}无限旋转动画：
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 2s linear infinite;
}
