css制作机动画
CSS动画制作方法
CSS动画可以通过@keyframes规则和animation属性实现。以下是具体实现方式：
关键帧定义
使用@keyframes定义动画序列，指定在不同时间点的样式变化：
@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: blue;}
}动画应用
将定义好的动画应用到元素上：
div {
width: 100px;
height: 100px;
animation-name: example;
animation-duration: 4s;
}常用动画属性
animation是以下属性的简写：
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: 动画结束后的样式状态
过渡动画实现
CSS过渡（transition）可以实现简单的属性变化效果：
div {
transition: width 2s, height 2s;
}
div:hover {
width: 300px;
height: 300px;
}3D变换动画
结合transform属性创建3D效果：
div {
transform-style: preserve-3d;
animation: spin 5s linear infinite;
}
@keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}性能优化建议
使用will-change属性预声明可能变化的属性：
.element {
will-change: transform, opacity;
}优先使用transform和opacity属性制作动画，这些属性不会触发重排，性能更好。避免在动画中频繁修改width、height、margin等属性。
