transform 属性的 CSS 转换，但具有不同的模式

Question

我有一个按钮，当它悬停在上面时，它有一个缩放和旋转效果。我想达到这些效果，但持续时间不同。基本上，我想实现这样的目标

.button {    
   transition: transform 0.1s;/* scale should be .1s and rotate should be .5s*/
}
.button:hover {
   box-shadow: 0px 0px 2px 4px rgb(105, 64, 64);
   transform: scale(1.111, 1.111) rotate(360deg);
}

这样做的任何捷径？这甚至可能吗？

概念示例

.button{
  transition[scale]: .1s;
  transition[rotate]: .5s
}

编辑：实际上，已经存在的解决方案适用于 2 个不同的属性（height和opacity），而我的是在一个属性（transform）上，但transform有 2 种模式，rotate和scale，需要以不同的时间进行动画处理。我需要transform:rotate带.5s和transform:scale带.1s

编辑2：有人提到了动画的使用，所以这就是我所做的

.button {    
   transition: transform 0.1s;/* scale should be .1s and rotate should be .5s*/
}
.button:hover {
   box-shadow: 0px 0px 2px 4px rgb(105, 64, 64);
   transform: scale(1.111, 1.111) rotate(360deg);
}

这个方法首先自动播放动画，其次更重要的是，第二个动画覆盖了第一个动画，我只剩下缩放而不是旋转。但是，如果有人可以使此代码正常工作，无论哪种方式都很棒！

Answer 1

正如评论中所指出的，这可以通过包装容器来实现。这不是您所说的使用单个容器的理想行为，但不幸的是，截至 2020 年 12 月，该语法不受支持。下面是一个粗略的 POC，展示了这一点：

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.animate-scale {    
   transition: transform 0.1s;
}
.animate-scale:hover {    
   transform: scale(1.111, 1.111);
}
.animate-rotate {    
   transition: transform 0.5s;
}
.animate-rotate:hover {    
   transform: rotate(360deg);
}


.button {
   box-shadow: 0px 0px 2px 4px rgb(105, 64, 64);
}

<div class="wrapper">
  <div class="animate-scale">
    <div class="animate-rotate">
      <span class="button">
        Hover me!
      </span>
    </div>
  </div>
</div>