Is it possible to set different duration/delay for transform options?

Question

I want to set several transform options for my html object but with different duration and delay.

If i try to use something like that:

-webkit-transition         


        

Answer 1

That would be problem to do it like Doug said if you have 3d perspective in your animation. Probably you could use "transform-style: preserve-3d" but it doesn't work in IE 10-11 and works weird in all other browsers exept Firefox. So the only solution i think is to use CSS3 animations. In your case it would be:

@-webkit-keyframes rotate_scale {

    0% {
        -webkit-transform: rotate(0deg) scale(0);
     }
     50% {
        -webkit-transform: rotate(90deg) scale(0);
     }
     100% {
        -webkit-transform: rotate(180deg) scale(2);
     }
}
@keyframes rotate_scale {

    0% {
        transform: rotate(0deg) scale(0);
     }
     50% {
        transform: rotate(90deg) scale(0);
     }
     100% {
        transform: rotate(180deg) scale(2);
     }
}

So you can set the longest duration of your transforms. For example 20 seconds for rotation: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; And then just calculate when your another transform will begin. In the examle scale begins in ten seconds after rotation. So it would be a half of full time ( 50% ). And it would last 10 seconds so till the end of full time ( 100% ). But if you'd like to make scale duration 5 seconds for example you'd need to add new keyframe 75% { transform: rotate(135deg) scale(2); } and write there two transforms.