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

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

可能不是直接的，但是可以通过以下方式达到相同的效果 嵌套元素.

Answer 2

是的，你可以直接与CSS3动画做到这一点。如果有不透明度从0变换到1，持续20秒钟，然后，持续10秒的90度旋转，则在20秒的不透明度1创建为10秒不透明度0.5和旋转90度并且另一个关键帧在关键帧和旋转90度。这有点痛苦，但它会奏效。嵌套的div是有点清洁剂（如道格上面说的）

确定这里的代码：

@-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 3

这是问题做到像道格说，如果你在你的动画3D透视。也许你可以使用“变换风格：保持-3D”，但它不工作在IE 10-11和所有其他的浏览器火狐exept工作怪异。所以，我认为唯一的解决办法是使用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;然后才算当你的另一变换将开始。在examle规模开始在十秒钟旋转之后。因此，这将是全时（50％）的一半。而且，它还将最后10秒，直到这样的全职（100％）结束。但是，如果你想进行大规模的持续时间5秒例如你需要添加新的关键75% { transform: rotate(135deg) scale(2); }和写有双变换。