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:有人提到了动画的使用，所以这就是我所做的

@keyframes anim1 {
        0%{
          transform: rotate(0deg);
        }
        50%{
          transform: rotate(180deg);
        }
        100%{
          transform: rotate(180deg);
        }
      }
      @keyframes anim2 {
        0%{
          transform: scale(1,1);
        }
        50%{
          transform: scale(1.111,1.111);
        }
        100%{
          transform: scale(1,1);
        }
      }
.button{
animation: anim1 3s ease-in-out, anim2 5s ease-in-out;
}

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

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>