CSS 是否可以为转换选项设置不同的持续时间/延迟？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3627135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to set different duration/delay for transform options?
提问by Ilya Tsuryev
I want to set several transform options for my html object but with different duration and delay.
我想为我的 html 对象设置几个转换选项，但具有不同的持续时间和延迟。
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?
然后我将有不同的时间函数用于变换和不透明度，但是我可以为旋转和缩放设置不同的选项，例如旋转 10 秒和缩放 20 秒吗？
采纳答案by Doug
Probably not directly, but the same effect can be achieved by nesting elements.
可能不是直接的，但是通过嵌套元素可以达到同样的效果。
回答by Michael Mullany
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)
是的，您可以直接使用 CSS3 动画执行此操作。如果您有一个从 0 到 1 的持续 20 秒的不透明度变换，以及持续 10 秒的 90 度旋转，那么您将在 10 秒处创建一个不透明度为 0.5 的关键帧，并在 20 秒处创建一个不透明度为 1 的关键帧和 90 度以及另一个关键帧并旋转 90 度。这有点痛苦，但它会起作用。嵌套 div 更简洁（正如 Doug 上面所说）
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.
进入你的 HTML。
回答by user2846477
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:
如果你的动画中有 3d 透视图，那么像 Doug 所说的那样做就会有问题。可能您可以使用“transform-style:preserve-3d”，但它在 IE 10-11 中不起作用，并且在除 Firefox 之外的所有其他浏览器中工作都很奇怪。所以我认为唯一的解决方案是使用 CSS3 动画。在您的情况下，它将是：
@-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 twotransforms.
因此，您可以设置转换的最长持续时间。例如旋转 20 秒：animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale;然后计算您的另一个转换何时开始。在示例中，刻度在旋转后十秒内开始。所以这将是全职时间的一半（50%）。它会持续 10 秒，直到全场结束（100%）。但是，例如，如果您想让缩放持续时间为 5 秒，则您需要添加新的关键帧75% { transform: rotate(135deg) scale(2); }并在其中编写两个转换。
