css中制作动画
CSS 动画基础
CSS 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的中间状态，animation 控制动画的播放方式。
定义关键帧：
@keyframes example {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: green; }
}应用动画：
div {
animation-name: example;
animation-duration: 4s;
}常用动画属性
animation-name: 指定 @keyframes 名称animation-duration: 动画持续时间（如 2s）animation-timing-function: 速度曲线（ease/linear/ease-in等）animation-delay: 延迟开始时间animation-iteration-count: 播放次数（infinite表示无限循环）animation-direction: 播放方向（normal/alternate等）animation-fill-mode: 动画结束后的样式状态
简写形式：
div {
animation: example 3s ease-in 1s infinite alternate;
}过渡动画（Transition）
CSS 过渡用于元素状态变化时的平滑动画：
div {
transition: property duration timing-function delay;
}
/* 示例 */
button {
background: blue;
transition: background 0.5s ease;
}
button:hover {
background: red;
}3D 变换动画
通过 transform 属性实现更复杂的动画效果：
.box {
transform: rotateX(45deg) translateZ(50px);
transition: transform 1s;
}
.box:hover {
transform: rotateY(180deg);
}性能优化建议
使用 will-change 属性预先告知浏览器可能的变化：
.element {
will-change: transform, opacity;
}优先使用 transform 和 opacity 属性制作动画，这些属性不会触发重排，性能更好。避免动画中使用 box-shadow 等昂贵属性。
浏览器兼容性
现代浏览器都支持 CSS 动画。对于旧版浏览器，可以添加前缀：
@-webkit-keyframes example {
/* ... */
}
.element {
-webkit-animation: example 2s;
animation: example 2s;
}
