[css-transition] :animating state pseudo-class & display property

Consider that we have expanding/collapsing section that we would like to
animate.
At the end of collapsing the section should be set to display:none.
And at start of animation it shall get display:none. While animating it
should have overflow:hidden
to achieve needed effect.

I propose to add :animating pseudo-class that is "on" while element is
under the animation.
So we will have this:

section.expanded
{
   display:block;
   height: max-content;
   transition: height 400ms;
}
section.expanded:animating { display:block; overflow-y:hidden; }

section.collapsed
{
   display:none;
   height: 0;
   transition: height 400ms;
}
section.collapsed:animating { display:block; overflow-y:hidden; }

The :animating state pseudo-class will help to deal with
other discrete non-animateable properties while animations.

We are using :animating year or so ago and found it
quite useful in many animation related cases.

-- 
Andrew Fedoniouk.

http://terrainformatica.com