Tinymotion是一个Vue.js动画库，可与Tailwind CSS无缝协作。

安装和下载：

# NPM
$ npm i tinymotion

如何使用它：

1.导入并注册Tinymotion。

import Motion from 'tinymotion';

export default {
  components: { Motion },
  data() {
    return {
      motion: {
        // parameters here
      }
    }
  }
}

2.悬停时触发动画。

<Motion
  :hover="[
    'rotate-0 rounded-xl',
    'rotate-102 rounded-2xl scale-75',
    'rotate-90 rounded-xl scale-100',
  ]"
  :options="{ instantRollback: true }"
  class="w-24 h-24 bg-indigo-600"
/>

3.单击触发动画。

<Motion
  :click="[
    'rotate-0 rounded-2xl',
    'rotate-102 rounded-xl scale-50',
    'rotate-90 rounded-2xl scale-100',
  ]"
  class="w-24 h-24 bg-indigo-600 cursor-pointer"
/>

4.通过自定义元素触发动画。

<Motion
  v-model="trigger"
  :trigger="[
    'rotate-0 bg-blue-600 rounded-xl',
    'rotate-12 scale-125 bg-indigo-600',
    '-rotate-6 scale-150 rounded-3xl',
    'rotate-0 scale-100 rounded-xl bg-rose-600',
  ]"
  class="w-24 h-24 cursor-pointer"
/>

5.在应用加载时触发动画。

<Motion
  :auto="[
    'scale-50',
    'scale-75',
    'scale-100',
    'scale-125',
  ]"
  :options="{ repeat: true, duration: 500 }"
  class="w-24 h-24 rounded-full bg-indigo-600"
/>

6.所有可能的参数：

hover: [],
click: [],
trigger: [],
auto: [],
instantRollback: false,
rollback: true,
repeat: false,
factor: 0,
delay: 0,
stepDelay: 0,
skip: 0,
duration: 300,
ease: "ease-in-out",

---

官网：https://github.com/lepikhinb/tinymotion

演示：https://www.vue365.cn/code_demo.php?id=3891

GitHub下载：https://github.com/lepikhinb/tinymotion/archive/master.zip