css制作动画
CSS 动画基础
CSS 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式。
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation: example 3s ease-in-out infinite;
}关键帧定义
@keyframes 规则允许指定动画序列中特定时间点的样式。可以使用百分比或 from/to 关键字。
@keyframes slidein {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}动画属性
animation 是以下属性的简写：
animation-name: 指定@keyframes名称。animation-duration: 动画持续时间（如2s）。animation-timing-function: 速度曲线（如ease,linear）。animation-delay: 动画开始前的延迟。animation-iteration-count: 播放次数（如infinite）。animation-direction: 播放方向（如alternate）。animation-fill-mode: 动画结束后的样式保留方式。
div {
animation: slidein 2s ease-out 1s infinite alternate;
}过渡效果
CSS 过渡（transition）用于在状态变化时平滑过渡，适合简单交互效果。
button {
background: blue;
transition: background 0.5s ease;
}
button:hover {
background: green;
}性能优化
优先使用 transform 和 opacity 属性，它们可通过 GPU 加速。避免频繁触发重排（如修改 width）。
.box {
transform: translateZ(0); /* 触发硬件加速 */
}示例：弹跳动画
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.ball {
animation: bounce 0.5s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}响应式动画
结合媒体查询调整动画参数：
@media (max-width: 600px) {
.box {
animation-duration: 1s;
}
}
