Using from or to in CSS animations will break transformation

[giovannipiller]

Description:

Code like the following:

  @keyframes someAnimation {
    from {
      transform: scale3d(1.5,1.5,1) rotate(0deg);
    }

    50% {
      transform: scale3d(1,1,1) rotate(90deg);
    }

    to {
      transform: scale3d(1.5,1.5,1) rotate(0deg);
    }
  }

Will be wrongly converted to the following. Notice the [data-ractive-css] attributes;

@keyframes someAnimation {
    from[data-ractive-css~="{328a91fd-7095-2748-09c4-42b189b78cb8}"], [data-ractive-css~="{328a91fd-7095-2748-09c4-42b189b78cb8}"] from {
      transform: scale3d(1.5,1.5,1) rotate(0deg);
    }

    50% {
      transform: scale3d(1,1,1) rotate(90deg);
    }

    to[data-ractive-css~="{328a91fd-7095-2748-09c4-42b189b78cb8}"], [data-ractive-css~="{328a91fd-7095-2748-09c4-42b189b78cb8}"] to {
      transform: scale3d(1.5,1.5,1) rotate(0deg);
    }
  }

In the meantime, a workaround to this is using 0% and 100% rather than from or to, in your CSS animations.

Versions affected:

tested on 0.8.10 and edge

Reproduction:

https://jsfiddle.net/7qxqrkks/1/

[MartinKolarik]

This recently popped up in sveltejs/svelte#245 as well. I'll check if there's a reasonable way to fix this in Ractive.

@Rich-Harris did make a good point though - keyframe declarations are global, so unless we can use a different transformation strategy to make them scoped, it might be better to simply put them in a separate (global) css file.