多个同时的 CSS3 转换转换以不同的速度

Question

问题：

甚至可以对一个元素进行两次不同的转换并让它们以不同的速度过渡吗？

没有变换的示例（小提琴）：

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 1s linear, height 2s linear;
}
div:hover {
  width: 200px;
  height: 400px;
}

请注意，宽度扩展到 200px 需要 1 秒，高度扩展到 400px 需要 2 秒。

转换示例（小提琴）：

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: transform 1s linear, transform 2s linear;
}
div:hover {
  transform: scale(1.5);
  transform: rotate(45deg);
}

请注意它如何仅执行第二次转换。如何指定要为过渡执行的转换？这是 CSS 转换设计中的疏忽吗？我怎样才能做到这一点？

Answer 1

不要认为你可以按照你尝试的方式去做。可能的解决方案是包装器对象

例如

多个过渡

在这里品尝小提琴

示例代码 （HTML）

<div class="wrap">
<div class="inner"></div>
</div>

和 CSS

.wrap {
    width: 100px;
    height: 100px;
    transition: transform 1s linear;
}
.inner {
    width: 100%;
    height: 100%;
    background: red;
    transition: transform 2s linear;
}
.wrap:hover {
    transform: scale(1.5);
}
.wrap:hover .inner {
    transform: rotate(45deg);
}

或使用@slynagh回答中所述的动画和关键帧

只是不注意，在 chrome 上（即在 V33 上）过渡时使用时，transform 属性似乎不起作用，但它在 IE11 上工作正常，这就是我测试过的全部内容

Answer 2

您可以尝试使用动画。

div {
  width: 100px;
  height: 100px;
  background: red;
}
div:hover {
  -webkit-animation: anim1 2s linear;
}
@-webkit-keyframes anim1{
  0% { -webkit-transform: scale(1) rotate(0deg); }
  50% {-webkit-transform: scale(1.5) rotate(22.5deg); }  
  100% { -webkit-transform: scale(1.5) rotate(45deg); }
}

您还需要为该悬停效果设置反向。

Answer 3

不幸的是，

您没有偶然发现CSS实现中的错误。

:hover第二个transform语句只是覆盖第一个语句，这就是CSS核心。这同样适用于将同一参数转换两次 - 稍后在 CSS 中定义的规则或基于选择器权重的规则优先。

这将起作用：

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: transform 1s linear;
}
div:hover {
  transform: scale(1.5) rotate(45deg);
}

但是对于您想要的不同长度，转换@OJay建议的路线 - 转换包装器上的参数之一 - 是一个很好的方法。

正如@slynagh所建议的那样，由于单个元素上的动画/转换是线性执行的，因此无法按预期工作。

但是我们可以@OJay没有任何额外元素的情况下使样品更整洁：

div {
    width: 100px;
    height: 100px;
    position: relative;
    transition: transform 1s linear;
}
div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    transition: transform 2s linear;
}
div:hover {
    transform: scale(1.5);
}
div:hover:after {
    transform: rotate(45deg);
}

尽管能够使用伪元素取决于您的div 的内容。

请注意，您缺少特定于浏览器的前缀，这不是跨浏览器证明。

Answer 4

公认的答案建议使用包装器元素，但您可以通过简单地部署动画而不是传输来最优雅地实现此效果。

注

：注：使用 animation-fill-mode: forwards;（或等效速记）至关重要，以便在动画完成时它不会恢复为起始值。

工作示例：

:root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
div {
  width: 60px;
  height: 60px;
  background: red;
}
div:hover {
  animation: scaleRotate 2s linear forwards;
}
@keyframes scaleRotate {
   0% {transform: scale(1) rotate(0deg);}
  50% {transform: scale(1.5) rotate(22.5deg);}
 100% {transform: scale(1.5) rotate(45deg);}

<div></div>