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.
