CSS淡出动画结束后display属性未生效？技术问题咨询

问题核心原因 #

你在@keyframes的100%帧里写display: none是无效的，本质原因是：

• CSS动画仅支持对可插值的属性执行过渡/动画，比如opacity、transform、width这类能在数值间平滑变化的属性。
• display属于离散属性（只有block/none/flex等固定值，没有中间过渡状态），浏览器会直接忽略动画中对它的设置。
• 哪怕你加了animation-fill-mode: forwards，它也只会保留那些能被动画跟踪的属性值（比如你的opacity: 0），对display这种不支持动画的属性完全不起作用。

可行解决方案 #

方案1：监听动画结束事件（最可靠，适合需要完全移除元素占位的场景）

用JavaScript监听元素的animationend事件，在动画真正结束后手动设置display: none：

const exitElement = document.querySelector('.lock-container-exit');
exitElement.addEventListener('animationend', () => {
  exitElement.style.display = 'none';
});

对应CSS只需要移除@keyframes里的display: none，保留原有淡出逻辑即可：

.lock-container-exit {
    display: flex;
    margin-top: 5vh;
    justify-content: center;
    animation-name: fade-out;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

方案2：用visibility替代display（无需JS，但元素仍占布局空间）

如果可以接受元素淡出后仍保留占位，用visibility: hidden代替display: none——visibility是支持动画的属性：

@keyframes fade-out {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

方案3：结合transition和类切换（更灵活的状态管理）

如果是通过类触发动画，用transition替代animation，再配合过渡结束事件设置display：

.lock-container {
    display: flex;
    margin-top: 5vh;
    justify-content: center;
    transition: opacity 1s ease 1s; /* 延迟1s后开始1s的淡出 */
}

.lock-container.exit {
    opacity: 0;
}

对应的JS逻辑：

const container = document.querySelector('.lock-container');
container.classList.add('exit');
container.addEventListener('transitionend', () => {
  container.style.display = 'none';
});

补充说明 #

你的contact-info组件淡入动画可以正常工作，但需要在fade-in的100%帧里补充opacity: 1，否则animation-fill-mode: forwards无法保留最终的显示状态：

@keyframes fade-in {
    100% {
        opacity: 1;
    }
}

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