css属性制作动画
CSS 动画基础
CSS 动画通过 @keyframes 和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式（如时长、延迟、循环等）。
示例代码：
@keyframes slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element {
animation: slide-in 1s ease-in-out;
}关键属性详解
1. @keyframes
定义动画的中间状态，支持百分比或 from/to 语法：
@keyframes fade {
0% { opacity: 0; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}2. animation 复合属性
包含以下子属性（空格分隔）：
animation-name: 关键帧名称（如slide-in）。animation-duration: 动画时长（如2s）。animation-timing-function: 速度曲线（如ease、linear）。animation-delay: 延迟时间（如0.5s）。animation-iteration-count: 循环次数（如infinite）。animation-direction: 播放方向（如alternate来回播放）。
示例：
.box {
animation: bounce 2s ease-in-out 0.5s infinite alternate;
}常用动画效果
1. 淡入淡出
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-element {
animation: fade-in 0.5s;
}2. 缩放动画
@keyframes scale {
0% { transform: scale(0.5); }
100% { transform: scale(1); }
}
.scale-element {
animation: scale 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}3. 旋转动画
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 2s linear infinite;
}性能优化建议
- 优先使用
transform和opacity属性，它们可通过 GPU 加速。 - 避免频繁触发重排（如修改
width、margin）。 - 使用
will-change提示浏览器优化：.animated-element { will-change: transform, opacity; }
浏览器兼容性
- 现代浏览器均支持 CSS 动画。
- 如需兼容旧版浏览器（如 IE9），需添加前缀：
@-webkit-keyframes example { ... } @-moz-keyframes example { ... }
