以不同的速度进行多个同时的 CSS3 变换过渡

Posted 2023-03-06

【中文标题】以不同的速度进行多个同时的 CSS3 变换过渡

【英文标题】：Multiple, simultaneous CSS3 transform transitions at varied speeds

【发布时间】：2014-03-31 17:14:56

【问题描述】：

问题：

是否甚至可以对一个元素进行两种不同的变换并让它们以不同的速度进行过渡？

没有转换的示例 (Fiddle)：

div 
  width: 100px;
  height: 100px;
  background: red;
  transition: width 1s linear, height 2s linear;


div:hover 
  width: 200px;
  height: 400px;

注意宽度扩展到 200 像素需要 1 秒，高度扩展到 400 像素需要 2 秒。

转换示例 (Fiddle)：

div 
  width: 100px;
  height: 100px;
  background: red;
  transition: transform 1s linear, transform 2s linear;


div:hover 
  transform: scale(1.5);
  transform: rotate(45deg);

注意它是如何只执行第二次转换的。如何指定要为转换执行的转换？这是对 CSS 转换设计的疏忽吗？我怎样才能做到这一点？

【参考方案1】：

你可以尝试使用动画。

div 
  width: 100px;
  height: 100px;
  background: red;


div:hover 
  -webkit-animation: anim1 2s linear;


@-webkit-keyframes anim1
  0%  -webkit-transform: scale(1) rotate(0deg); 
  50% -webkit-transform: scale(1.5) rotate(22.5deg);   
  100%  -webkit-transform: scale(1.5) rotate(45deg); 

您还需要为悬停效果设置反向。

【讨论】：

@easwee 添加供应商前缀

其实多个动画还是不行，因为第二个动画还是会覆盖第一个，我们又回到了原来的问题。

更新了原版，只有 1 个动画。

【参考方案2】：

不要认为你可以按照你尝试的方式做到这一点。可能的解决方案是包装对象

例如

Multiple transitions

小提琴样本here

示例代码 (html)

<div class="wrap">
<div class="inner"></div>
</div>

和 CSS

.wrap 
    width: 100px;
    height: 100px;
    transition: transform 1s linear;

.inner 
    width: 100%;
    height: 100%;
    background: red;
    transition: transform 2s linear;

.wrap:hover 
    transform: scale(1.5);

.wrap:hover .inner 
    transform: rotate(45deg);

或使用@slynagh 回答中提到的动画和关键帧

值得注意的是，transform 属性在 chrome 上转换时似乎不起作用（i.m 在 V33 上），但它在 IE11 上工作正常，这就是我在上面测试过的全部

【参考方案3】：

很遗憾，您没有偶然发现 CSS 实现中的错误。

在:hover 上，第二个transform 语句只是简单地覆盖了第一个，这是CSS 核心。这同样适用于两次转换相同的参数 - 稍后在 CSS 中定义的规则或基于选择器权重的规则优先。

这可行：

div 
  width: 100px;
  height: 100px;
  background: red;
  transition: transform 1s linear;


div:hover 
  transform: scale(1.5) rotate(45deg);

但是对于您想要的不同长度的变换，@OJay 建议的路线 - 变换包装器上的参数之一 - 是一种好方法。

正如@slynagh 所建议的那样，由于单个元素上的动画/变换是线性执行的，因此无法按预期工作。

但我们可以让@OJay 示例更加整洁，无需任何额外元素：

div 
    width: 100px;
    height: 100px;
    position: relative;
    transition: transform 1s linear;

div:before 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    transition: transform 2s linear;

div:hover 
    transform: scale(1.5);

div:hover:after 
    transform: rotate(45deg);

虽然能否使用伪元素取决于 div 的内容。

请注意，您缺少浏览器特定的前缀，这不是跨浏览器证明。

【参考方案4】：

公认的答案建议使用包装器元素，但您可以通过简单地部署动画而不是过渡来最优雅地实现此效果。

注意使用animation-fill-mode: forwards;（或等效的简写形式）至关重要，这样动画完成后它不会恢复到起始值。

工作示例：

:root 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;


div 
  width: 60px;
  height: 60px;
  background: red;


div:hover 
  animation: scaleRotate 2s linear forwards;


@keyframes scaleRotate 

   0% transform: scale(1) rotate(0deg);
  50% transform: scale(1.5) rotate(22.5deg);
 100% transform: scale(1.5) rotate(45deg);

<div></div>