CSS Snippet for “Animating” both Display and Transform

I often find myself needing to change an element from display: none; to display: block; and transition some transform properties on it. (Especially menu drop-downs…) Unfortunately, if you attempt to change display and transform at the same time, display “wins”: the element appears, but nothing gets transitioned.

I’ve been able to work around that by using an animation instead of a transition:

@keyframes grow {
0% {
display: none;
opacity: 0;
1% {
display: block;
opacity: 0;
transform: scale(0);
100% {
opacity: 1;
transform: scale(1);
/* Add your own prefixes */

I use the first percent of the animation to change the display value, then the next 99% to change the transition-able properties.

Check out the difference in this Pen:

See the Pen MYPgPp by James Steinbach (@jdsteinbach) on CodePen.