面试题：CSS 关键帧动画的复杂应用

Question

假设要实现一个类似轮播图的动画效果，使用 CSS 关键帧动画，要求图片淡入淡出且有平滑的过渡效果，同时每张图片展示时间为3秒，切换时间为1秒，简述实现思路并给出关键的 CSS 代码片段。

Answer 1

实现思路

1. 使用 @keyframes 规则定义关键帧动画，描述图片淡入淡出的过程。
2. 在图片元素上应用这个动画，并设置合适的动画时长、延迟和次数等属性，以实现每张图片展示3秒，切换时间为1秒的效果。

关键CSS代码片段

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

/* 应用动画到图片 */
img {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: fade 4s ease-in-out infinite;
}

img:nth-child(2) {
    animation-delay: -3s;
}

img:nth-child(3) {
    animation-delay: -6s;
}