Как сделать два эффекта с разной задержкой CSS (transition)?

Question

[Хостинг Ярославль]

У меня в диве .product два элемента. Хочу, чтобы при наведении .vm-product-descr-container - сразу плавно увеличил высоту, а поверх его с задержкой плавно появился .addtocart-area. При потере форкуса, должно быть наоборот: .addtocart-area - исчез плавно - сразу, а .vm-product-descr-container - плавно уменьшил высоту с задержкой.

Делаю так:

.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 - изменяет высоту с задержкой и при наведении и при потере фокуса.
.addtocart-area - появляется плавно без нужно задержки, а исчезает мгновенно и тоже без задержки.

Что я не так делаю?

Мой кривой пример в действии тут: viktoryatex.ru (при наведении на товар).

Comments

[Даниил Попов]

Похоже, вам нужно осваивать @keyframes
https://developer.mozilla.org/en-US/docs/Web/CSS/@...

[Хостинг Ярославль]

Даниил Попов, т.е. просто с transition-delay этот вопрос не решить?

Answer 1

[monochromer]

Инспектор показывает, что этот код неправильный
transition: all 0.3s linear 0;
То есть для задержки нужно явно указывать единицы измерения - 0s