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

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

demo

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模拟left更好。

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