@keyframes support

[SGAMERyu]

The current solution is to write inside the style tag

<style>
@keyframes loadingRotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>

<style lang="ts">
css({
 '.test': {
    'animation': 'loadingRotate 2s linear infinite'
   }
})
</style>

stitches has a global animation api keyframes function doc: https://stitches.dev/docs/styling#keyframe-animations
That way would be better ？

[Tahul]

@SGAMERyu ;

This is a very interesting idea, do you think you could try a PR?

I have a lot of work to achieve before VueJS Amsterdam, and I'm afraid I won't be able to implement this before few weeks.

Don't mind asking any questions you need!

[SGAMERyu]

@SGAMERyu ;

This is a very interesting idea, do you think you could try a PR?

I have a lot of work to achieve before VueJS Amsterdam, and I'm afraid I won't be able to implement this before few weeks.

Don't mind asking any questions you need!

I tried implementing animate functions, which are used as follows

const test = keyFrames({
    from: { transform: 'scale(1)' },
    to: { transform: 'scale(1.5)' }
})

css({
  'test': {
    animation: `${test} 1s linear infinite`,
  }
})

Maybe he is not perfect. Can you give me some advice