css animation for any padding value-CodePudding

I have a series of div that can have their own padding values. Some of them have in addition the following "autoClose" class to make them totally disappear (not only hidden but shrinked to 0px)

.autoClose {
    animation: shrinkDiv 5s forwards;
    animation-timing-function: linear;
    animation-delay: 3s;
}
@keyframes shrinkDiv {
   from  {opacity: 1; height: auto; padding: 20px 10px 20px 40px;}
   to    {opacity: 0; height: 0px; padding: 0px 0px 0px 0px;}
}

Is it possible to have 20px 10px 20px 40px padding value (as example in the 'from' line) depending on the actual padding value of the concerned div without using javascript ?

CodePudding user response：

Exclude the "from" attribute from your animation. It should take the padding of the div automatically. Code example;

.autoClose {
    animation: shrinkDiv 5s forwards;
    animation-timing-function: linear;
    animation-delay: 3s;
}
@keyframes shrinkDiv {
   to    {opacity: 0; height: 0px; padding: 0px 0px 0px 0px;}
}

https://jsfiddle.net/dqup2bvL/7/