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,而是animation设置关键帧以获得所需的效果.