Question

我想为我的html对象设置几个变换选项，但具有不同的持续时间和延迟。

如果我尝试使用类似的东西：

-webkit-transition: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2); 
-webkit-transition-duration: 2000ms, 6000ms; 
-webkit-transition-delay: 0ms, 6000ms;

然后我将有不同的时间函数用于变换和不透明度，但我可以设置不同的旋转和缩放选项，例如旋转10秒，缩放20秒？

Answer 1

是的，您可以直接使用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。

Answer 2

可能不直接，但nesting elements可以达到同样的效果。

Answer 3

如果你的动画中有3d透视图，那就像Doug说的那样。可能你可以使用＆＃34; transform-style：preserve-3d＆＃34;但它在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); }并在那里写两个转换。

是否可以为变换选项设置不同的持续时间/延迟？

3 个答案: