面试题：JavaScript 控制 CSS 动画的跨浏览器兼容性解决方案

检测不同浏览器特性的方法

使用特性检测（Feature Detection）：

特性检测是检查浏览器是否支持某个特定特性，而不是检测浏览器类型。例如，检测requestAnimationFrame：

if (typeof window.requestAnimationFrame === 'function') {
    // 浏览器支持requestAnimationFrame
    window.requestAnimationFrame(() => {
        // 动画逻辑
    });
} else {
    // 提供替代方案，例如使用setTimeout模拟
    const polyfill = (callback) => {
        return setTimeout(callback, 1000 / 60);
    };
    polyfill(() => {
        // 动画逻辑
    });
}

前缀检测：

不同浏览器厂商会对一些实验性或新的 CSS 属性和 JavaScript API 添加前缀。常见的前缀有webkit-（Chrome、Safari），moz-（Firefox），ms-（Edge，旧版IE），o-（旧版Opera）。
例如检测CSS Animation：

const animationEndEventNames = {
    'WebkitAnimation': 'webkitAnimationEnd',
    'MozAnimation': 'animationend',
    'OAnimation': 'oAnimationEnd',
    'animation': 'animationend'
};
for (const key in animationEndEventNames) {
    if (document.body.style[key]!== undefined) {
        const animationEndEventName = animationEndEventNames[key];
        document.addEventListener(animationEndEventName, () => {
            // 动画结束逻辑
        });
        break;
    }
}

针对主流浏览器的兼容性解决方案及代码示例

Chrome：

Chrome 支持大部分标准的 CSS 动画和 JavaScript 控制动画的方法。但对于一些新特性，可能需要添加webkit-前缀。
CSS 动画示例：

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in { -webkit-animation: fadeIn 1s ease-in-out; animation: fadeIn 1s ease-in-out; }

- **JavaScript 控制动画示例**：
```javascript
const element = document.querySelector('.fade-in');
element.style.WebkitAnimationPlayState = 'paused';
element.style.animationPlayState = 'paused';
// 恢复动画
element.style.WebkitAnimationPlayState = 'running';
element.style.animationPlayState = 'running';

Firefox：

Firefox 支持标准的 CSS 动画，但对于一些早期实验性特性，可能需要moz-前缀。
CSS 动画示例：

@-moz-keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.slide-in { -moz-animation: slideIn 1s ease-in-out; animation: slideIn 1s ease-in-out; }

- **JavaScript 控制动画示例**：
```javascript
const element = document.querySelector('.slide-in');
element.style.MozAnimationPlayState = 'paused';
element.style.animationPlayState = 'paused';
// 恢复动画
element.style.MozAnimationPlayState = 'running';
element.style.animationPlayState = 'running';

Safari：

Safari 对 CSS 动画的支持与 Chrome 类似，需要webkit-前缀。
CSS 动画示例：

@-webkit-keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate { -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; }

- **JavaScript 控制动画示例**：
```javascript
const element = document.querySelector('.rotate');
element.style.WebkitAnimationPlayState = 'paused';
element.style.animationPlayState = 'paused';
// 恢复动画
element.style.WebkitAnimationPlayState = 'running';
element.style.animationPlayState = 'running';

Edge：

现代 Edge 基于 Chromium，支持标准的 CSS 动画和 JavaScript 控制动画方法。但旧版 Edge（基于 Trident）可能需要ms-前缀。
CSS 动画示例（针对旧版 Edge）：

@-ms-keyframes scaleUp {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}
@keyframes scaleUp {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}

.scale-up { -ms-animation: scaleUp 1s ease-in-out; animation: scaleUp 1s ease-in-out; }

- **JavaScript 控制动画示例（针对旧版 Edge）**：
```javascript
const element = document.querySelector('.scale-up');
element.style.MsAnimationPlayState = 'paused';
element.style.animationPlayState = 'paused';
// 恢复动画
element.style.MsAnimationPlayState = 'running';
element.style.animationPlayState = 'running';

为了确保最佳的跨浏览器兼容性，建议在开发过程中始终进行特性检测，并在 CSS 和 JavaScript 代码中提供带有前缀和标准形式的代码。同时，使用工具如 Autoprefixer 可以自动为 CSS 代码添加必要的浏览器前缀。

星途面试题库

面试题：JavaScript 控制 CSS 动画的跨浏览器兼容性解决方案

知识考点

面试题答案

检测不同浏览器特性的方法

针对主流浏览器的兼容性解决方案及代码示例