postcss-transform-shortcut icon indicating copy to clipboard operation
postcss-transform-shortcut copied to clipboard

Transform shortcuts in animation keyframes

Open jaydenseric opened this issue 9 years ago • 1 comments

Is this suported, and if not, could we add support for this?

@keyframes test {
  0% {
    scale: 0;
  }
  50% {
    rotate: 90deg;
  }
  100% {
    scale: 2;
  }
}

Should compile to:

@keyframes test {
  0% {
    transform: scale(0);
  }
  50% {
    transform:  scale(1) rotate(90deg);
  }
  100% {
    transform:  scale(2);
  }
}

I don't expect this to work when combining animations, just within one keyframes declaration.

Manually doing the calculations when combining several transform operations in one animation is really hard and annoying. This is the primary use case for the new transform properties and to be able to use them in this way now would be beyond awesome.

jaydenseric avatar Apr 27 '16 06:04 jaydenseric

It would be too much effort at this time to calculate the offsets between keyframes.

jonathantneal avatar Nov 28 '16 05:11 jonathantneal