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

【问题标题】：Is it possible to set different duration/delay for transform options?是否可以为转换选项设置不同的持续时间/延迟？
【发布时间】：2011-04-07 07:53:16
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css css-transitions css-transforms

【解决方案1】：

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

【讨论】：

是的，这应该是可能的，尽管肯定比我想象的要难。谢谢！

【解决方案2】：

是的，您可以直接使用 CSS3 动画来做到这一点。如果您有一个持续 20 秒的从 0 到 1 的不透明度变换，以及持续 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 中。

【讨论】：

很抱歉我没听懂。不透明度（或任何其他“正常”属性）和 webtransform 时间可以这样设置：-webkit-transition: -webkit-transform, opacity; -webkit-transition-duration: 2000ms, 6000ms;但是在您的示例中如何为另一个 webtransform 添加时间 - 在我的情况下缩放（如果 webtransform 定义为： -webkit-transform: rotate(180deg) scale(2); ）。谢谢！
编辑了代码——我建议使用动画而不是过渡
不幸的是，如果您指定时间函数并且希望动画在关键帧之间平滑，这将分崩离析。现在是 2015 年，还有更好的答案吗？
缓动函数已完全指定 - 你只需要做一些数学运算 (w3.org/TR/css-easing-1)

【解决方案3】：

如果您在动画中使用 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); } 并在那里编写两个变换。

【讨论】：