Search code examples
csscss-transitionstransition

Css Transitions one after another

I tried to make the CSS transitions to play one after other ,means first it has to transform the width and later height.
I tried with couple of options but everything is in vain.I achieved this in the javascript But can some CSSprofessionals help to explore this and break it up.Thanks in advance.

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

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

  • Just use the transition-delay property in the transition shorthand to do multiple transitions in sequence in one CSS rule.

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