css3：具有不同定时功能的两个转换（css3） [英] css3: two transitions with different timing functions (css3)

问题描述

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

I want to use a transform for both scale and translateX, but each with a different timing function. Currently I have it working with absolute positioning instead of translateX, as follows:

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 而不是左？

How would you rewrite this to achieve the same, but use translateX instead of left ?

推荐答案

，我可能使用一个包装器，并将两个变换之一转换为包装器，另一个用于元素本身。

In this case, I would probably use a wrapper and transition one of the two transforms for the wrapper and the other one for the element itself.

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 。

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

Another idea would be not to use a transition, but an animation and set the keyframes such that to obtain the desired effect.

这篇关于css3：具有不同定时功能的两个转换（css3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！