CSS-переход свойства transform, но с разными режимами

#css

Вопрос:

У меня есть кнопка, на которой при наведении на нее отображается масштаб и эффект поворота. Я хочу добиться этих эффектов, но с разной продолжительностью. В принципе, я хочу добиться чего-то подобного

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

Этот метод, во-первых, автоматически воспроизводит анимацию, а во-вторых, и что более важно, вторая анимация переопределяет первую, и у меня остается только масштаб и без поворота. Но если кто-то может заставить этот код работать, это здорово в любом случае!

1. на самом деле, приведенное выше решение предназначено для 2 разных свойств (высота и непрозрачность), в то время как мое относится к одному свойству (преобразование), но преобразование имеет 2 режима, поворот и масштабирование, которые необходимо анимировать с разным временем. Но я действительно благодарю вас за ваш ответ 🙂

2. используйте анимацию вместо transform или рассмотрите вложенные контейнеры

3. Пока это невозможно. Предлагаются различные преобразования, но они еще не приняты.

Ответ №1:

Как отмечено в комментариях, это может быть достигнуто с помощью упаковочных контейнеров. Это не желаемое поведение, которое вы указали при использовании одного контейнера, но, к сожалению, по состоянию на декабрь 2020 года этот синтаксис не поддерживается. Ниже приведен примерный 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>

Развернуть фрагмент