面试题：CSS动画与过渡：关键帧动画实现循环淡入淡出效果

Question

请使用CSS关键帧动画实现一个元素循环淡入淡出的效果。要求淡入时间为2秒，淡出时间也为2秒，且循环播放，同时说明在不同浏览器下可能需要添加哪些前缀。

Answer 1

/* 定义关键帧动画 */
@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* 应用动画到元素 */
.fade-element {
    animation: fadeInOut 4s ease-in-out infinite;
}

/* 不同浏览器可能需要的前缀 */
/* WebKit 内核浏览器（Chrome、Safari 等） */
@-webkit-keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
.fade-element {
    -webkit-animation: fadeInOut 4s ease-in-out infinite;
}

/* Mozilla 内核浏览器（Firefox） */
@-moz-keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
.fade-element {
    -moz-animation: fadeInOut 4s ease-in-out infinite;
}

/* Opera 浏览器 */
@-o-keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
.fade-element {
    -o-animation: fadeInOut 4s ease-in-out infinite;
}