15

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

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

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

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

4

3 回答 3

13

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

于 2010-09-09T18:29:04.790 回答
7

可能不是直接的，但是通过嵌套元素可以达到同样的效果。

于 2010-09-02T18:17:50.263 回答
0

如果你的动画中有 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); }并在那里写入两个变换。

于 2014-04-30T08:15:48.260 回答