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

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 秒处创建一个不透明度为 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。

Answer 2

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

Answer 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); }

并在那里写入 two 变换。

Answer 4

现在可以使用 individual

transform

属性：

transform: rotate(180deg) scale(2); 

可以写成如下：

rotate: 180deg;
scale: 2;

将鼠标悬停在演示上即可查看过渡效果：

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

body:hover > div {
  rotate: 180deg;
  scale: 2;
}

div {
  width: 120px;
  height: 80px;
  background: purple;
  transition: 1s scale, 0.5s rotate;
}

<div></div>

了解更多：

• https://web.dev/articles/css-individual-transform-properties