CSS动画制作代码
以下是一些常见的CSS动画制作代码示例，涵盖基础动画、关键帧动画和过渡效果：
基础关键帧动画
通过@keyframes定义动画序列，结合animation属性应用动画：
/* 定义关键帧 */
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* 应用动画 */
.element {
animation: slide-in 1s ease-out forwards;
}多阶段关键帧动画
定义包含多个百分比节点的复杂动画：
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.element {
animation: bounce 0.5s infinite;
}过渡效果（Transition）
通过状态变化触发平滑过渡：
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}复合动画属性
同时控制多个动画参数：
.element {
animation:
rotate 2s linear infinite,
fade 3s ease-in-out alternate;
}
@keyframes rotate {
to { transform: rotate(360deg); }
}
@keyframes fade {
from { opacity: 0.5; }
to { opacity: 1; }
}3D变换动画
使用transform-style和透视效果：
.container {
perspective: 1000px;
}
.card {
transform-style: preserve-3d;
transition: transform 1s;
}
.card:hover {
transform: rotateY(180deg);
}性能优化技巧
使用will-change预声明动画属性：
.optimized {
will-change: transform, opacity;
animation: slide 2s ease;
}注意：
- 使用
transform和opacity属性可获得最佳性能 - 避免动画过多影响页面性能
- 考虑使用
prefers-reduced-motion媒体查询为运动敏感用户提供替代方案
