是否可以为转换选项设置不同的持续时间/延迟？
我想为我的 html 对象设置几个转换选项，但具有不同的持续时间和延迟。
如果我尝试使用类似的东西：
-webkit-transition: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2);
-webkit-transition-duration: 2000ms, 6000ms;
-webkit-transition-delay: 0ms, 6000ms;
那么我将为变换和不透明度设置不同的时间函数，但我可以为旋转和缩放设置不同的选项，例如旋转 10 秒和缩放 20 秒？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
是的，您可以直接使用 CSS3 动画来做到这一点。如果您有一个从 0 到 1 持续 20 秒的不透明度变换，以及持续 10 秒的 90 度旋转，那么您可以在 10 秒处创建一个不透明度为 0.5 且旋转 90 度的关键帧，并在 20 秒处创建另一个不透明度为 1 的关键帧并旋转90度。这有点痛苦，但它会起作用。嵌套 div 更干净一些（正如 Doug 上面所说）
好的，这是代码：
然后您将其放入
HTML 中。
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:
And you'd put
into your HTML.
可能不是直接的，但可以通过 嵌套元素。
Probably not directly, but the same effect can be achieved by nesting elements.
现在可以使用单独
transform属性：可以写如下：
将鼠标悬停在演示中以查看过渡效果：
阅读更多：
It is now possible using individual
transformproperties this:Can be written as follows:
Hover the demo with the mouse to see the transition:
Read more:
如果你的动画中有 3D 透视，那么像 Doug 所说的那样就会有问题。也许您可以使用“transform-style：preserve-3d”，但它在 IE 10-11 中不起作用，并且在除 Firefox 之外的所有其他浏览器中工作得很奇怪。所以我认为唯一的解决方案是使用 CSS3 动画。在你的情况下，它是：
所以你可以设置变换的最长持续时间。例如旋转 20 秒：animation-duration: 20s;动画名称：rotate_scale； -webkit动画持续时间：20秒； -webkit-animation-name:rotate_scale; 然后计算另一个变换何时开始。在示例中，旋转后十秒内开始缩放。所以这将是全职时间的一半（50%）。它会持续 10 秒，直到完整时间结束 (100%)。但是，如果您想让缩放持续时间为 5 秒，例如，您需要添加新的关键帧
75% { transform:rotate(135deg)scale(2); }并在那里写入两个转换。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:
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 keyframe75% { transform: rotate(135deg) scale(2); }and write there two transforms.