Css Переходы один за другим

Question

Я попытался сделать игру CSS transitions, чтобы играть один за другим, значит, сначала он должен преобразовать ширину и более позднюю высоту.
Я пробовал с парой вариантов, но все впустую. Я достиг этого в javascript Но могут ли некоторые CSS профессионалов помочь это и разоблачить его. Спасибо заранее.

<style> 
div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    -webkit-transition: width 2s; 
    transition: all 2s; 
} 

div:hover { 
    width: 300px; 
    height:500px; 
} 
</style> 

Answer 1

Просто используйте transition-delay свойство в transition стенографии сделать несколько переходов в последовательности в одном правиле CSS.

-webkit-transition: width 2s, height 2s ease 2s; 
transition: width 2s, height 2s ease 2s; 

Answer 2

Разделите отдельные свойства перехода на значения, разделенные запятыми, для удобства ссылок ... затем просто используйте задержку перехода для их последовательности.

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    transition-property: width, height; 
 
    transition-duration:2s, 4s; 
 
    transition-delay:0s, 2s; 
 
    transition-timing-funtion:linear; 
 
} 
 

 
div:hover { 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div></div>

Answer 3

Вы можете использовать Keyframes для этого.

/* Standard */ 
@keyframes all { 
    0% {width: 100px; height: 100px;} 
    50% {width: 300px; height: 100px;} 
    100% {width: 300px; height: 500px;} 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes all { 
    0% {width: 100px; height: 100px;} 
    50% {width: 300px; height: 100px;} 
    100% {width: 300px; height: 500px;} 
} 

Зов это следующим образом:

div:hover { 
    -webkit-animation: all 2s; /* Chrome, Safari, Opera */ 
    animation: all 2s; 
    animation-fill-mode: forwards; 
} 

Посмотрите этот пример JsFiddle

Edit: Другие ответы вывешенные перед мной использовать лучший способ, чем это, так как они могут быть использованы для реверсе когда пользователь перекатывается над div.