vue-tsx-keyframes

library of keyframes as CSS in JS with using vue-tsx-support

Usage

Create vue-cli project, and install vue-tsx-support

Install from npm:

yarn add -D vue-tsx-keyframes # npm install --save-dev vue-tsx-keyframes

In your .tsx file, add @keyframes enclosed backquote

data() {
  return {
    horizontalFrame: `
      @keyframes horizontal {
        0% {
          transform:translateX(-8px);
        }
        100% {
          transform:translateX(8px);
        }
      }
    `
  };
}

Import vue-tsx-keyframes

import keyframes from "vue-tsx-keyframes";

Add keyframes in mounted()

mounted() {
  keyframes(this.horizontalFrame);
}

Sample : https://github.com/shuta13/vue-tsx-sample/blob/master/src/components/CssInJs.tsx