css动画制作
CSS动画制作基础
CSS动画通过@keyframes规则和animation属性实现。定义关键帧后，将其绑定到元素并设置动画参数。
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slideIn 1s ease-out forwards;
}关键属性说明
animation是以下子属性的简写：
animation-name: 指定@keyframes名称animation-duration: 动画持续时间（如2s）animation-timing-function: 速度曲线（ease,linear等）animation-delay: 延迟开始时间animation-iteration-count: 重复次数（infinite表示无限循环）animation-direction: 播放方向（alternate表示往返播放）animation-fill-mode: 结束状态保留（forwards保留最后一帧）
多关键帧动画
在@keyframes中可以定义多个中间状态：
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); }
100% { transform: translateY(0); }
}性能优化建议
使用transform和opacity属性制作动画，这些属性不会触发重排：
- 优先使用
transform: translate()替代top/left - 使用
opacity替代display或visibility切换 - 避免在动画中使用
box-shadow等高性能消耗属性
动画事件监听
通过JavaScript监听动画事件：
element.addEventListener('animationstart', () => {});
element.addEventListener('animationend', () => {});
element.addEventListener('animationiteration', () => {});实用示例：悬停效果
.button {
transition: transform 0.3s, background-color 0.2s;
}
.button:hover {
transform: scale(1.05);
background-color: #f0f0f0;
}进阶技巧
使用CSS变量动态控制动画：
:root {
--anim-duration: 0.5s;
}
.element {
animation: spin var(--anim-duration) linear infinite;
}通过prefers-reduced-motion媒体查询为运动敏感用户提供替代方案：
@media (prefers-reduced-motion: reduce) {
.element {
animation: none;
}
}
