css - css3：具有不同计时功能的两个转换（css3）

Question

我想对scale和都使用变换translateX，但每个都有不同的计时功能。目前我让它使用绝对定位而不是translateX，如下所示：

transition: transform 500ms cubic-bezier(0.390, -0.600, 1.000, -0.600), 
            left 500ms cubic-bezier(0.270, 0.875, 0.575, 0.870);

.

left: -50px ;
transform: scale(2,2) ;

您将如何重写它以达到相同的效果，但使用translateX而不是left？

Answer 1

在这种情况下，我可能会使用包装器并转换两种转换中的一种用于包装器，另一种用于元素本身。

演示

HTML：

<div class='wrap'>
  <div class='el'></div>
</div>

相关CSS：

.wrap {
  transition: transform .5s cubic-bezier(.39, -.6, 1, -.6);
}
.el {
  transition: transform .5s cubic-bezier(.27, .875, .575, .87);
}
.wrap:hover { transform: scale(2,2); }
.wrap:hover .el { transform: translateX(-50px); }

不确定这是否比translateX使用模拟 a 更好left。

另一个想法是不使用 a transition，而是使用 ananimation并设置关键帧以获得所需的效果。