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 (Fiddle):

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

div:hover {
  width: 200px;
  height: 400px;
}

Notice how it takes 1 second for the width to expand to 200px, and 2 seconds for the height to expand to 400px.

Example with transforms (Fiddle):

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

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

Notice how it only performs the second transform. How can you specify which transform to perform for the transition? Is this an oversight in the design of CSS transforms? How can I go about accomplishing this?

Answer 1

You could try to use animations.

div {
  width: 100px;
  height: 100px;
  background: red;
}

div:hover {
  -webkit-animation: anim1 2s linear;
}

@-webkit-keyframes anim1{
  0% { -webkit-transform: scale(1) rotate(0deg); }
  50% {-webkit-transform: scale(1.5) rotate(22.5deg); }  
  100% { -webkit-transform: scale(1.5) rotate(45deg); }
}

You would need to also set up the reverse for that hover out effect.

Answer 2

Don't think you can do it the way you are attempting. Possible solutions would be a wrapper object

eg

Multiple transitions

sample fiddle here

sample code (HTML)

<div class="wrap">
<div class="inner"></div>
</div>

and CSS

.wrap {
    width: 100px;
    height: 100px;
    transition: transform 1s linear;
}
.inner {
    width: 100%;
    height: 100%;
    background: red;
    transition: transform 2s linear;
}
.wrap:hover {
    transform: scale(1.5);
}
.wrap:hover .inner {
    transform: rotate(45deg);
}

or use animations and keyframes as mentioned in answer by @slynagh

Just out of note, the transform property doesn't seem to work when used in transition on chrome (i.m on V33), but it works fine on IE11, thats all I have tested this on