Multiple CSS3 Transform Conversions at Different Speed

Question

Question:

Is it even possible to make two different transformations on an element and move them at different speeds?

Example without conversions ( Fiddle ):

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

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

Note that for widths up to 200 pixels, it takes 1 second and 2 seconds to increase to 400 pixels.

Example with conversions ( 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 performs only the second conversion. How can you specify which conversion to perform for the transition? Is this overseeing the development of CSS transforms? How can i do this?

Answer 1

, , . -

,

(HTML)

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

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

, @slynagh

, chrome (i.m V33), IE11, ,

Answer 2

.

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

.

Answer 3

, CSS.

:hover transform , ​​CSS. - , CSS , .

:

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

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

, @OJay, - - .

@slynagh, , , / .

@OJay - :

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

div.

, , , .