How to make two effects with different CSS delay (transition)?

Question

css

I have two elements in the .product div. I want that when hovering .vm-product-descr-container - immediately smoothly increase the height, and .addtocart-area smoothly appears on top of it with a delay. When the focus is lost, it should be the other way around: .addtocart-area - disappeared smoothly - immediately, and .vm-product-descr-container - smoothly reduced the height with a delay.
I do it like this:

.product .vm-product-descr-container {
height:60px!important;
transition: all 0.3s linear 0.3s;}

.product:hover .vm-product-descr-container {
height:100%!important;
transition: all 0.3s  linear 0;}


.product .addtocart-area {
opacity:0;
 transition: all 0.3s  linear 0;}

.product:hover .addtocart-area {
opacity:1;
transition: all 0.3s linear 0.3s;}

.vm-product-descr-container - changes height with a delay on both hover and focus loss.
.addtocart-area - appears smoothly without any delay, and disappears instantly and also without delay.
What am I doing wrong?
My crooked example in action is here: viktoryatex.ru (when hovering over a product).

Answer 1

The inspector shows that this code is incorrect. That is, for the delay, you need to explicitly specify the units of measurement -
0s