Как в моём случае можно организовать порядок анимации (задержку)?

Question

[del993788]

Здравствуйте. Вот фидл: https://jsfiddle.net/ym7tbvso/

Вы наводите мышь на контейнер и синий блок увеличивается, а красный поднимается вверх и исчезает. При этой анимации красный и синий блок не касаются друг друга, однако, когда вы убираете мышь с контейнера, то анимация проигрывает в обратном порядке и выходит так, что красный блок наезжает на синий. Подскажите, можно ли как-нибудь задержать красный блок при отводе мыши с контейнера, чтобы в начале уменьшился синий, а затем появился красный?

Answer 1

[origami1024]

Св-во transition-delay
маленькому блоку без хувера задать
transition-delay: .3s;
и на хувере ему же задать, чтобы при наведении убрать эту задержку
transition-delay: 0s;