如何实现基于元素自身padding值的CSS shrink动画（无需JS）

完全可以做到，关键是别在动画的起始状态写死padding值——CSS动画的from状态本来就会自动沿用元素自身的初始样式，你只需要在to状态定义最终收缩到的目标样式就行。另外原代码里height: auto没法执行动画，得换成max-height才能实现高度收缩的效果。

调整后的代码： #

.autoClose {
    animation: shrinkDiv 5s forwards;
    animation-timing-function: linear;
    animation-delay: 3s;
    /* 必须添加，避免收缩时内容溢出 */
    overflow: hidden;
    /* 设置足够大的初始max-height，覆盖所有div的可能高度 */
    max-height: 1000px;
}

@keyframes shrinkDiv {
    to {
        opacity: 0;
        max-height: 0;
        padding: 0;
    }
}

关键说明： #

• 删掉from状态后，动画起始样式就是每个div自己的padding、高度等属性，自然适配了各自的初始值。
• height: auto无法参与CSS动画，用max-height模拟的话，只要初始值足够大，就能实现从“自适应高度”收缩到0的效果。
• overflow: hidden是为了在收缩过程中隐藏超出元素范围的内容，保证消失效果的完整性。

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