动画css制作
动画CSS制作方法
CSS动画可以通过@keyframes和animation属性实现动态效果，以下是几种常见方法：
基础关键帧动画
定义关键帧并应用到元素：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}多状态动画
设置多个关键帧百分比点：
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}复合动画属性
同时控制多个动画参数：
.box {
animation:
slide 3s ease-in-out infinite alternate,
colorChange 5s linear infinite;
}3D变换动画
结合transform-style实现立体效果：
@keyframes spin {
to { transform: rotateY(360deg); }
}
.card {
transform-style: preserve-3d;
animation: spin 5s linear infinite;
}性能优化技巧
- 优先使用
transform和opacity属性（触发硬件加速） - 避免动画过程中触发重排（如改变
width/height） - 使用
will-change: transform预声明变化属性
实用动画代码示例
悬停放大效果：
.button {
transition: transform 0.3s;
}
.button:hover {
transform: scale(1.1);
}无限旋转加载动画：
@keyframes loading {
to { transform: rotate(360deg); }
}
.spinner {
animation: loading 1s linear infinite;
}注意：现代CSS还支持scroll-driven animations等新特性，可通过animation-timeline关联滚动位置触发动画。
