Using scale and translate in the same keyframe doesn't work

[jory]

From this sample:

@keyframes translateAndScale {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-20%) scale(0.9); }
}

I get output like:

@-moz-keyframes translateAndScale {
  0% {
    -webkit-transform: translateY(0)     transform: scale(1);;
    -moz-transform: translateY(0)     transform: scale(1);;
    -o-transform: translateY(0)     transform: scale(1);;
    -ms-transform: translateY(0)     transform: scale(1);;
    transform: translateY(0)     transform: scale(1);;
  }

  100% {
    -webkit-transform: translateY(-20%)     transform: scale(0.9);;
    -moz-transform: translateY(-20%)     transform: scale(0.9);;
    -o-transform: translateY(-20%)     transform: scale(0.9);;
    -ms-transform: translateY(-20%)     transform: scale(0.9);;
    transform: translateY(-20%)     transform: scale(0.9);;
  }
}

@-webkit-keyframes translateAndScale {
  0% {
    -webkit-transform: translateY(0)     transform: scale(1);;
    -moz-transform: translateY(0)     transform: scale(1);;
    -o-transform: translateY(0)     transform: scale(1);;
    -ms-transform: translateY(0)     transform: scale(1);;
    transform: translateY(0)     transform: scale(1);;
  }

  100% {
    -webkit-transform: translateY(-20%)     transform: scale(0.9);;
    -moz-transform: translateY(-20%)     transform: scale(0.9);;
    -o-transform: translateY(-20%)     transform: scale(0.9);;
    -ms-transform: translateY(-20%)     transform: scale(0.9);;
    transform: translateY(-20%)     transform: scale(0.9);;
  }
}

@-o-keyframes translateAndScale {
  0% {
    -webkit-transform: translateY(0)     transform: scale(1);;
    -moz-transform: translateY(0)     transform: scale(1);;
    -o-transform: translateY(0)     transform: scale(1);;
    -ms-transform: translateY(0)     transform: scale(1);;
    transform: translateY(0)     transform: scale(1);;
  }

  100% {
    -webkit-transform: translateY(-20%)     transform: scale(0.9);;
    -moz-transform: translateY(-20%)     transform: scale(0.9);;
    -o-transform: translateY(-20%)     transform: scale(0.9);;
    -ms-transform: translateY(-20%)     transform: scale(0.9);;
    transform: translateY(-20%)     transform: scale(0.9);;
  }
}

@-ms-keyframes translateAndScale {
  0% {
    -webkit-transform: translateY(0)     transform: scale(1);;
    -moz-transform: translateY(0)     transform: scale(1);;
    -o-transform: translateY(0)     transform: scale(1);;
    -ms-transform: translateY(0)     transform: scale(1);;
    transform: translateY(0)     transform: scale(1);;
  }

  100% {
    -webkit-transform: translateY(-20%)     transform: scale(0.9);;
    -moz-transform: translateY(-20%)     transform: scale(0.9);;
    -o-transform: translateY(-20%)     transform: scale(0.9);;
    -ms-transform: translateY(-20%)     transform: scale(0.9);;
    transform: translateY(-20%)     transform: scale(0.9);;
  }
}

@keyframes translateAndScale {
  0% {
    -webkit-transform: translateY(0)     transform: scale(1);;
    -moz-transform: translateY(0)     transform: scale(1);;
    -o-transform: translateY(0)     transform: scale(1);;
    -ms-transform: translateY(0)     transform: scale(1);;
    transform: translateY(0)     transform: scale(1);;
  }

  100% {
    -webkit-transform: translateY(-20%)     transform: scale(0.9);;
    -moz-transform: translateY(-20%)     transform: scale(0.9);;
    -o-transform: translateY(-20%)     transform: scale(0.9);;
    -ms-transform: translateY(-20%)     transform: scale(0.9);;
    transform: translateY(-20%)     transform: scale(0.9);;
  }
}

This appears to be an issue with scale expanding itself in place, even though the transform should make that unnecessary.

A second thing here, probably deserving of its own ticket, is the fact that you get all the vendor prefixes for transform in each vendor's keyframe declaration, when you really only need (optionally) that vendor's and the unprefixed one.

[chrismendis]

+1

[notslang]

the 2nd does have it's own issue: #229

as for the first - I gotta look into this