面试题：CSS @keyframes 专家难度：多元素协同动画优化

优化策略

减少重排重绘：
- 合并样式修改：在CSS中一次性定义好动画所需的全部样式，避免在JavaScript中频繁修改单个样式属性。例如，不要先修改元素的width，再修改height，而是一次性修改width和height。
- 使用will-change属性：提前告知浏览器元素即将发生的变化，让浏览器有机会提前优化。比如，对于要进行3D旋转的元素，可以设置will-change: transform。不过要注意，滥用此属性可能会消耗更多资源，应按需使用。
- 批量操作DOM：如果需要通过JavaScript动态添加或修改图片元素，先在文档片段（DocumentFragment）中进行操作，完成后再将文档片段添加到DOM树中，这样只会触发一次重排重绘。
处理高帧率下的流畅度问题：
- 选择合适的帧率：通常60fps是比较理想的帧率，但在性能较差的设备上，可以适当降低帧率，比如30fps。在@keyframes中，通过合理设置关键帧的时间间隔来控制帧率。
- 使用硬件加速：对于3D旋转等动画，利用CSS的transform属性，因为现代浏览器会对transform和opacity等属性的动画进行硬件加速。例如，设置transform: rotateY(360deg)比直接修改left、top等属性的性能更好。

核心代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 定义图片样式 */
        img {
            opacity: 0;
            display: block;
            margin-bottom: 10px;
            will-change: opacity, transform;
        }
        /* 定义图片淡入动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        /* 定义图片整体3D旋转动画 */
        @keyframes rotate3D {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(360deg);
            }
        }
        /* 给每张图片添加淡入动画并设置时间间隔 */
        img:nth-child(1) {
            animation: fadeIn 0.5s ease-in-out 0s forwards, rotate3D 3s ease-in-out 4s infinite;
        }
        img:nth-child(2) {
            animation: fadeIn 0.5s ease-in-out 0.5s forwards, rotate3D 3s ease-in-out 4s infinite;
        }
        img:nth-child(3) {
            animation: fadeIn 0.5s ease-in-out 1s forwards, rotate3D 3s ease-in-out 4s infinite;
        }
        /* 以此类推，如果有更多图片，继续增加nth-child选择器 */
    </style>
</head>
<body>
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
</body>
</html>

上述代码中，通过@keyframes定义了图片淡入和3D旋转的动画。每张图片通过nth-child选择器设置了不同的淡入延迟时间，在所有图片淡入完成（4秒后），整体开始3D旋转动画。同时，利用will-change属性和transform动画来优化性能。

面试题：CSS @keyframes 专家难度：多元素协同动画优化

知识考点

面试题答案

优化策略

核心代码示例