Is it possible to set different duration/delay for transform options?
-
26-09-2019 - |
문제
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?
해결책
Probably not directly, but the same effect can be achieved by nesting elements.
다른 팁
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.
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.