vue js中写动态的@keyframes

在Vue.js中，你可以使用CSS模块和动态类绑定来编写动态的@keyframes。你可以使用以下步骤：

1. 创建一个CSS模块文件，命名为styles.module.css（或其他名称），并在其中编写你的@keyframes动画样式。

   /* styles.module.css */

   @keyframes myAnimation {
     0% {
       opacity: 0;
     }
     100% {
       opacity: 1;
     }
   }

2. 在Vue组件中，导入CSS模块并在需要的元素上使用动态类绑定来应用@keyframes动画样式。

   <template>
     <div :class="$style.myElement"></div>
   </template>

   <script>
   import styles from './styles.module.css';

   export default {
     name: 'MyComponent',
     data() {
       return {
         isAnimating: true
       }
     },
     computed: {
       myElementClasses() {
         return {
           [styles.myElement]: true,
           [styles.myAnimation]: this.isAnimating
         }
       }
     }
   }
   </script>

   <style module>
   /* Here you can define styles that are scoped to this component */
   .myElement {
     width: 100px;
     height: 100px;
     background-color: red;
   }
   </style>

在上面的代码中，我们在模板中将动态类绑定到“myElement”元素上，并在计算属性中根据“isAnimating”的值设置动态类绑定。当“isAnimating”为true时，将应用“myAnimation”类，这将触发我们在CSS模块文件中定义的@keyframes动画样式。