我想为我的html对象设置几个变换选项，但具有不同的持续时间和延迟。
如果我尝试使用类似的东西：
-webkit-transition: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2);
-webkit-transition-duration: 2000ms, 6000ms;
-webkit-transition-delay: 0ms, 6000ms;
那么我将有不同的时间函数用于变换和不透明度，但我可以设置不同的旋转和缩放选项，例如旋转10秒，刻度20秒？
可能不是直接的，但可以实现相同的效果 嵌套元素。
可能不是直接的，但可以实现相同的效果 嵌套元素。
是的，您可以直接使用CSS3动画执行此操作。如果你有一个从0到1的不透明度变换，持续20秒，以及持续10秒的90度旋转，那么你创建一个10帧的关键帧，不透明度为.5，旋转90度，另一个关键帧为20秒，不透明度为1并旋转90度。这有点痛苦，但它会起作用。嵌套div更清洁（如Doug所说）
好的，这是代码：
@-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;
}
你放了
-webkit-animation-duration: 20s;
进入你的HTML。
如果您在动画中使用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);
}
}
因此，您可以设置转换的最长持续时间。例如，旋转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); } 并写在那里 二 变换。