面试题：CSS动画与过渡：高性能动画优化及响应式适配

Question

在一个移动端网页应用中，有一个复杂的动画导航栏，包含多个图标和文字，在页面滚动时需要实现动画效果。要求在保证动画流畅性的前提下，尽量减少性能消耗，同时要适配不同的屏幕尺寸和分辨率。请详细说明你的优化策略、所使用的CSS技术以及如何检测和适配不同设备，写出关键的CSS代码片段及对应的媒体查询。

Answer 1

优化策略

1. 使用硬件加速：利用 CSS 的 transform 和 opacity 属性来创建动画，这两个属性触发硬件加速，能提高动画流畅性。例如 transform: translateX(0px) 比直接修改 left 属性性能更好。
2. 减少重排和重绘：避免在动画过程中频繁改变元素的布局相关属性，如 width、height、margin 等。若必须改变布局，尽量在动画开始前一次性改变，或使用 will-change 提前告知浏览器。
3. 合理使用 requestAnimationFrame：在 JavaScript 中，如果需要操作 DOM 来配合动画，使用 requestAnimationFrame 来控制动画节奏，它会在浏览器下一次重绘之前调用回调函数，能保证动画和浏览器刷新频率同步，提高流畅性。

所使用的 CSS 技术

1. CSS3 动画：
   • 过渡（Transitions）：用于实现简单的状态过渡动画，如导航栏图标在鼠标悬停时的颜色、大小变化等。例如：

.nav-icon {
    transition: color 0.3s ease, transform 0.3s ease;
}
.nav-icon:hover {
    color: #ff0000;
    transform: scale(1.2);
}

- **关键帧动画（Keyframes Animations）**：适用于复杂的动画序列，如导航栏在页面滚动时的展开和收缩动画。例如：

@keyframes slideIn {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}
.nav-bar {
    animation: slideIn 0.5s ease-out;
}

2. Flexbox 和 Grid：用于布局导航栏，方便适配不同屏幕尺寸。Flexbox 适用于一维布局，Grid 适用于二维布局。例如，使用 Flexbox 实现水平排列的导航栏图标和文字：

.nav-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

检测和适配不同设备

1. 媒体查询（Media Queries）：通过检测设备的屏幕宽度、高度、分辨率等特性来应用不同的样式。
   • 根据屏幕宽度适配：

/* 手机屏幕（竖屏） */
@media (max - width: 480px) {
   .nav-icon {
        font - size: 14px;
    }
   .nav - text {
        display: none;
    }
}
/* 平板屏幕（竖屏） */
@media (min - width: 481px) and (max - width: 768px) {
   .nav - text {
        font - size: 16px;
    }
}
/* 桌面屏幕 */
@media (min - width: 769px) {
   .nav - container {
        justify - content: space - between;
    }
}

- **根据设备像素比（分辨率）适配**：

/* 高分辨率屏幕 */
@media (-webkit - min - device - pixel - ratio: 2), (min - resolution: 192dpi) {
   .nav - icon {
        background - image: url(nav - icon - high - res.png);
        background - size: contain;
    }
}