面试题：复杂场景下CSS浏览器前缀兼容性实践

Question

假设有一个使用CSS3的动画效果，需要在Chrome（基于WebKit内核）和Firefox（基于Gecko内核）浏览器上都能正常显示。动画效果是一个元素从初始位置平移到新位置，且带有淡入效果。请写出完整的CSS代码，要求正确处理-webkit-和-moz-前缀以保证兼容性，并且要考虑到不同浏览器对动画属性的支持差异。

Answer 1

/* 定义动画关键帧 */
@keyframes moveAndFadeIn {
    from {
        opacity: 0;
        transform: translateX(0);
    }
    to {
        opacity: 1;
        transform: translateX(100px); /* 假设新位置是向右平移100px */
    }
}

@-webkit-keyframes moveAndFadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateX(0);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(100px);
    }
}

@-moz-keyframes moveAndFadeIn {
    from {
        opacity: 0;
        -moz-transform: translateX(0);
    }
    to {
        opacity: 1;
        -moz-transform: translateX(100px);
    }
}

/* 应用动画到元素 */
.element {
    animation: moveAndFadeIn 3s ease-in-out;
    -webkit-animation: moveAndFadeIn 3s ease-in-out;
    -moz-animation: moveAndFadeIn 3s ease-in-out;
}