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: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2); 
-webkit-transition-duration: 2000ms, 6000ms; 
-webkit-transition-delay: 0ms, 6000ms;

Then i will have different time function for transform and opacity but can i set different options for rotate and scale, e.g. rotate for 10s and scale 20s?

Solution 1

Probably not directly, but the same effect can be achieved by nesting elements.

Solution 2

Yes you can do this directly with CSS3 animations. If you have an opacity transform from 0 to 1 that lasts 20 seconds, and a 90 degree rotation that lasts 10 seconds, then you create a keyframe at 10 seconds with opacity .5 and rotation 90 degrees and another keyframe at 20 seconds with opacity 1 and rotation 90 degrees. It's sort of a pain, but it will work. Nesting divs is a bit cleaner (as Doug says above)

Ok here's the code:

@-webkit-keyframes foo {
 0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0;
 }
 50% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0.5;
 }

 100% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
 }

And you'd put

-webkit-animation-duration: 20s;

into your HTML.