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

Unfortunately you have not stumbled on a bug in CSS implementation.

On :hover the second transform statement is simply overwriting the first one, this is CSS core. And the same applies to transforming the same parameter twice - rules defined later in the CSS or based on selector weight take precedence.

This would work:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: transform 1s linear;
}

div:hover {
  transform: scale(1.5) rotate(45deg);
}

But for your desired different length transforms the route suggested by @OJay - transform one of the parameters on a wrapper - is a good way.

As suggested by @slynagh will not work as expected as animations/transformations on a single element are performed linearly.

But we can make @OJay sample even neater without any additional elements:

div {
    width: 100px;
    height: 100px;
    position: relative;
    transition: transform 1s linear;
}
div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    transition: transform 2s linear;
}
div:hover {
    transform: scale(1.5);
}
div:hover:after {
    transform: rotate(45deg);
}

Though being able to use a pseudo element depends on the content of your div.

Do take note, that you are missing browser specific prefixes and this is not cross browser proof.