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

【问题标题】：css3: two transitions with different timing functions (css3)css3：具有不同计时功能的两个转换（css3）
【发布时间】：2013-05-15 08:03:50
【问题描述】：

我想对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？

【问题讨论】：

标签： css transform scale css-transitions

【解决方案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); }

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

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

【讨论】：