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

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

可能不是直接的,但嵌套元素可以实现相同的效果.