CSS 动画怎么做？从基础到进阶的完整入门指南
复合动画程式码解析复合动画结合多种效果，创造出丰富的视觉体验：
1. 彩虹旋转球
.rainbow-spinner {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
background-size: 300% 300%;
animation: rainbowSpin 3s ease-in-out infinite;
}
@keyframes rainbowSpin {
0% {
transform: rotate(0deg) scale(1);
background-position: 0% 50%;
}
50% {
transform: rotate(180deg) scale(0.8);
background-position: 100% 50%;
}
100% {
transform: rotate(360deg) scale(1);
background-position: 0% 50%;
}
}2. 脉冲波纹效果
.pulse-wave {
animation: pulseWave 2s ease-out infinite;
}
.pulse-wave::before,
.pulse-wave::after {
content: '';
position: absolute;
border: 2px solid #8b5cf6;
border-radius: 50%;
animation: ripple 2s ease-out infinite;
}
@keyframes ripple {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.5); opacity: 0; }
}3. JavaScript 动画控制
// 暂停/播放动画
element.style.animationPlayState = 'paused'; // 暂停
element.style.animationPlayState = 'running'; // 播放
// 重置动画
element.style.animation = 'none';
element.offsetHeight; // 强制重排
element.style.animation = 'animationName 2s ease infinite';
// 调整动画速度
element.style.animationDuration = '1s'; // 加快速度CSS 动画最佳实践性能优化技巧
优先使用 transform 和 opacity
这些属性不会触发重新布局，性能最佳
避免动画 width、height、top、left 等属性
合理设置动画时长
微互动：100-300ms
页面切换：300-500ms
装饰动画：1-3秒
使用 will-change 优化
.animated-element {
will-change: transform, opacity;
}用户体验考量支援无障碍设计
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}提供动画控制
对于循环动画，提供暂停选项
避免过于频繁或刺眼的动画
确保动画有明确的开始和结束状态
掌握这些 CSS 动画技巧，你就能为网站创造出既美观又实用的动画效果！记住，好的动画应该服务于用户体验，而不是单纯的炫技。