面试题：CSS关键帧动画：跨浏览器兼容性与高级应用

1. 不同浏览器实现淡入淡出、缩放和旋转组合效果的动画及前缀兼容性

/* Chrome, Safari, Opera */
@-webkit-keyframes complexAnimation {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(360deg);
    }
}

/* Standard syntax */
@keyframes complexAnimation {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(360deg);
    }
}

/* 应用动画 */
.element {
    /* Chrome, Safari, Opera */
    -webkit-animation: complexAnimation 5s ease-in-out forwards;
    /* Standard syntax */
    animation: complexAnimation 5s ease-in-out forwards;
}

2. 利用 @keyframes 的百分比关键帧和 animation-fill-mode 属性创建无缝衔接且保持最终状态的动画

百分比关键帧：@keyframes 中的百分比关键帧用于定义动画在不同时间点的状态。例如，0% 定义动画开始时的状态，50% 定义动画中间的状态，100% 定义动画结束时的状态。通过精确控制每个关键帧的属性值，可以实现复杂的动画过渡，从而创建无缝衔接的动画效果。
animation-fill-mode 属性：animation-fill-mode: forwards 确保动画结束后，元素保持在最终关键帧（100%）定义的状态。如果不设置 forwards，动画结束后元素会回到初始状态。

3. 性能和可维护性方面的考量

性能考量：
- 硬件加速：尽量使用 transform 和 opacity 来创建动画，因为现代浏览器可以对这两个属性进行硬件加速，从而提高动画性能。例如在上述动画中，使用 transform 实现缩放和旋转，opacity 实现淡入淡出。
- 减少重排和重绘：避免在动画过程中改变会导致重排（如改变元素宽度、高度、边距等）或重绘（如改变背景颜色、边框样式等）的属性。因为重排和重绘操作会消耗性能，尽量让动画在合成层上运行。
- 帧数控制：合理设置动画的时长和关键帧数量。过多的关键帧或过短的动画时长可能会导致浏览器渲染压力增大，影响性能。
可维护性考量：
- 命名规范：给 @keyframes 和 animation 起有意义的名称，便于理解和维护。例如上述代码中的 complexAnimation 能清晰表明这是一个复杂的动画。
- 模块化：如果项目中有多个动画，可以将动画相关的样式封装成独立的类或模块，便于复用和修改。例如，可以创建一个专门的动画类库，将不同的动画效果封装成不同的类。
- 注释：在关键代码处添加注释，解释动画的逻辑和关键属性的作用。如在 @keyframes 和 animation-fill-mode 相关代码处注释其功能和目的，方便后续开发者理解和维护。

星途面试题库

面试题：CSS关键帧动画：跨浏览器兼容性与高级应用

知识考点

面试题答案

1. 不同浏览器实现淡入淡出、缩放和旋转组合效果的动画及前缀兼容性

2. 利用 @keyframes 的百分比关键帧和 animation-fill-mode 属性创建无缝衔接且保持最终状态的动画

3. 性能和可维护性方面的考量