Multiple, simultaneous CSS3 transform transitions at varied speeds

Question

Question:

Is it even possible to do two different transforms on an element and have them transition at different speeds?

Example without transforms (Fiddl

Answer 1

The accepted answer suggests using a wrapper element, but you can achieve this effect most elegantly by simply deploying an animation rather than a transiton.

N.B. It is crucial to use animation-fill-mode: forwards; (or the shorthand equivalent) in order that when the animation completes it does not revert back to the start values.

Working Example:

: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);}