Могу ли я указать атрибут transform при переходе?

Question

Чаще всего бывает так:

    transition: background-color 0.2s,
                transform 1s;

но я хочу указать, какой атрибут преобразования, которым управляет переход, например

transition: transform scale 1s,
            transform skew 0.5s,
            transform rotate 2s;

Я попробовал это, это не сработало.

Answer 1

Используйте animation вместо transition и установите время для всех (1s + 0.5s + 2s) и в @keyframes разделите его на время, которое вы хотите установить для каждого transform свойства

div{
  width: 100px;
  height: 100px;
  background: red;
}
div:hover{
 animation: move 2.5s;
}
    @keyframes move {
      0% {
        transform: scale(3);
      }
      35% {
        transform: scale(3) skew(180deg); 
      }
      50%{
       transform: scale(3) skew(180deg) rotate(70deg); 
      }
    }

<div></div>