如何用CSS实现两张图片交叉淡入淡出并停在最终状态

你当前的问题根源在于两张图片共用了同一个fade动画，而这个动画的最终帧（100%）将透明度设为0，导致f2动画结束后会变回透明，露出白色背景。下面是修改后的代码，可实现交叉淡入淡出效果并最终停留在f2的显示状态：

.fadein {
    position:absolute;
    top:0px;
}
.fadein img {
    position:absolute;
    animation-iteration-count: 1;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

/* f1专属动画：从显示状态平滑淡出 */
@keyframes fadeOut {
    0% {opacity: 1;}
    20% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}

/* f2专属动画：从透明状态淡入并保持显示 */
@keyframes fadeIn {
    0% {opacity: 0;}
    20% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 1;}
}

#f1 {
    animation-name: fadeOut;
    opacity: 1; /* 初始默认显示f1 */
}

#f2 {
    animation-name: fadeIn;
    animation-delay: 2s; /* 延迟启动，和f1的动画形成交叉过渡 */
    opacity: 0; /* 初始默认隐藏f2 */
}

<div class="fadein">
    <img id="f1" src="https://dummyimage.com/320x180/fff/aaa">
    <img id="f2" src="https://loremflickr.com/320/180">
</div>

关键调整说明： #

• 拆分原动画为fadeOut（给f1）和fadeIn（给f2），分别控制两张图的显示逻辑
• 通过animation-delay: 2s让f2的淡入动画和f1的淡出动画重叠，实现交叉过渡效果
• 保留animation-fill-mode: forwards，确保动画结束后停在最终帧状态

内容的提问来源于stack exchange，提问作者lmoly