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

我想为我的 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 秒处创建一个不透明度为 0.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 中。