css动画怎么制作
使用 @keyframes 定义动画
通过 @keyframes 规则定义动画的关键帧，指定动画在不同时间点的样式状态。例如：
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}应用动画到元素
使用 animation 属性将动画绑定到目标元素，需指定动画名称、持续时间等参数：
.element {
animation: slideIn 1s ease-in-out forwards;
}常用动画属性
animation-name: 指定@keyframes名称。animation-duration: 动画持续时间（如2s）。animation-timing-function: 速度曲线（如ease,linear）。animation-delay: 动画开始前的延迟时间。animation-iteration-count: 播放次数（如infinite）。animation-direction: 播放方向（如alternate）。
多关键帧控制
在 @keyframes 中可设置百分比节点实现复杂动画：
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}结合 CSS 变换与过渡
通过 transform 和 transition 实现简单动画效果：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff0000;
}性能优化建议
- 优先使用
transform和opacity，这些属性可通过 GPU 加速。 - 避免频繁触发重排（如修改
width、margin）。 - 使用
will-change提示浏览器优化（如will-change: transform）。
浏览器兼容性处理
添加前缀确保兼容旧版浏览器：
@-webkit-keyframes example { /* Safari/Chrome */ }
@keyframes example { /* 标准语法 */ }
