通过结合CSS的@keyframes与@media query，可实现响应式动画：先定义基础动画，再根据不同设备调整时长、位移和复杂度，确保各屏幕尺寸下均有良好视觉体验。
在现代网页设计中，响应式动画不仅能提升用户体验，还能让界面更具活力。通过结合 CSS 的 @keyframes 动画与 @media query，我们可以根据不同设备的屏幕尺寸动态调整动画的表现方式，确保在手机、平板和桌面端都能获得最佳视觉效果。
使用 @keyframes 定义基础动画
要实现响应式动画，首先需要定义一个基础动画。使用 @keyframes 创建动画关键帧，比如一个简单的淡入滑动效果：
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animated-element {
animation: slideIn 0.6s ease-out forwards;
}
这个动画会在元素加载时从左侧滑入并渐显。但在小屏幕上，这样的位移可能显得过于剧烈或占用过多空间。
用 Media Query 调整不同屏幕下的动画行为
通过 @media query，我们可以在不同视口宽度下覆盖默认动画设置，使动画更适应移动设备。
立即学习“前端免费学习笔记（深入）”；
/* 桌面端：完整滑动效果 */
@media (min-width: 768px) {
.animated-element {
animation-duration: 0.8s;
animation-timing-function: ease;
}
}
/ 移动端：缩短位移，加快速度 /
@media (max-width: 767px) {
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px); / 减小移动距离 /
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animated-element {
animation: slideIn 0.4s ease-out forwards;
}
}
这样，在手机上动画更紧凑，避免内容“冲出”屏幕，同时更快完成，符合移动端用户快速浏览的习惯。
根据设备特性优化动画细节
除了尺寸适配，还可以根据设备能力调整动画复杂度。例如，为性能较弱的设备减少动画层级或关闭非必要动效。
/* 针对低性能设备减少动画 */
@media (prefers-reduced-motion: reduce) {
.animated-element {
animation: none;
opacity: 1; /* 确保内容仍可见 */
}
}
/ 平板横屏：适度增强视觉反馈 /
@media (min-width: 768px) and (max-width: 1024px) {
.animated-element {
animation: slideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
}
利用 prefers-reduced-motion 这类媒体特性，可以让动画更包容，照顾到有眩晕症或偏好静态界面的用户。
基本上就这些。通过将 CSS 动画与 media query 结合，既能保持代码简洁，又能实现真正响应式的动效体验。关键是根据不同设备合理调整动画时长、幅度和复杂度，让交互自然而不突兀。
