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

2020年代解决方案

CSS 已更改，我们现在拥有单独的变换属性：

.el {
  margin: 8em auto;
  width: 10em;
  aspect-ratio: 2;
  background: lightblue;
  transition: 
        translate .5s cubic-bezier(.27, .875, .575, .87), 
        scale .5s cubic-bezier(.39, -.6, 1, -.6);
    
    &:hover {
        scale: 2;
        translate: -6em
    }
}

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

请注意，如 2013 年解决方案所示，在包装器上应用缩放并在内部元素上应用平移意味着首先应用缩放，因此它也会缩放平移距离。

对于单独的变换属性，首先应用平移，因此我们需要将其加倍才能获得与使用相反顺序时相同的结果。

2013 年解决方案，因网络历史记录原因而保留

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

演示

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); }

.wrap {
  margin: 5em auto;
  width: 10em; height: 5em;
  transition: transform .5s cubic-bezier(.39, -.6, 1, -.6);
}

.el {
  height: inherit;
  background: lightblue;
  transition: transform .5s cubic-bezier(.27, .875, .575, .87);
}

.wrap:hover { transform: scale(2); }
.wrap:hover .el { transform: translateX(-50px); }

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

不确定这是否比使用

translateX

模拟

left

更好。

另一个想法是不使用

transition

，而是使用

animation

并设置关键帧以获得所需的效果。