如何在无JavaScript情况下实现display:none与opacity:0的动画延迟

你的代码失效的核心原因是：display属于离散型属性，无法参与过渡动画；同时元素处于display:none状态时不在浏览器渲染树中，transition规则根本不会触发。要同时实现「非激活状态不占空间」和「延迟淡入」的效果，可以用CSS动画替代过渡，具体如下：

修改后的CSS代码 #

.card p {
    line-height: 2rem;
    display: none;
    opacity: 0;
    font-size: 1.2rem;
}

.card.active p {
    display: block;
    /* 动画：名称 过渡时长 缓动函数 延迟时间 保持结束状态 */
    animation: fadeIn 1700ms ease-in-out 500ms forwards;
}

/* 定义淡入动画的关键帧 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

关键逻辑说明 #

• display:block：激活时立即让元素进入渲染树，解决「非激活状态不占空间」的需求；
• animation的500ms参数：设置动画启动延迟，对应你想要的「等待一段时间再淡入」；
• forwards关键字：让动画结束后保持最后一帧的opacity:1状态，无需额外设置opacity:1；
• 动画的1700ms是淡入过渡时长，和你原transition时长一致。

这样就能在不使用JavaScript的前提下，完美实现你想要的效果。

内容的提问来源于stack exchange，提问作者Soumya Sagnik Khanda