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> 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; Break up the individual transition properties into comma-separated values for ease of reference....then just use transition delay to sequence them.
div { width: 100px; height: 100px; background: red; transition-property: width, height; transition-duration:2s, 4s; transition-delay:0s, 2s; transition-timing-function:linear; } div:hover { width: 300px; height: 300px; }<div></div>You can use Keyframes for this.
/* 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;} } Call it like this:
div:hover { -webkit-animation: all 2s; /* Chrome, Safari, Opera */ animation: all 2s; animation-fill-mode: forwards; } See this example JsFiddle
Edit: The other answers posted before me use a better method than this, as they can be used to reverse the animation when the user rolls over the div.
