A Vue.js animation library with Tailwind CSS

npm i -S tinymotion

<template>
    <Motion
        :hover="[
            'scale-100',
            'scale-125 rotate-45',
            'scale-100 rotate-0',
        ]"
        :options="motion"
        class="w-16 h-16"
    />
</template>

<script>
import Motion from 'tinymotion';

export default {
    components: { Motion },

    data() {
        return {
            motion: {
                repeat: true,           // infinite animation until stopped
                rollback: true,         // reverse animation until return to the first keyframe
                instantRollback: true,  // instantly return to the first keyframe
                delay: 0,               // delay before the start
                stepDelay: 0,           // delay between keyframes
                factor: 1,              // delay factor (number of steps to skip) before every step
                skip: 0,                // number of steps to skip before the first flip
                duration: 600,          // default duration. might be overridden by duration-{value} Tailwind class
                ease: 'ease-in-out',    // transition timing function
            }
        }
    }
}
</script>

<template>
    <Motion
        :hover="[
            'scale-100',
            'scale-125 rotate-45',
            'scale-100 rotate-0',
        ]"
        class="w-16 h-16"
    />
</template>

<template>
    <Motion
        :click="[
            'scale-100',
            'scale-125 rotate-45',
            'scale-100 rotate-0',
        ]"
        class="w-16 h-16"
    />
</template>

<template>
    <Motion
        v-model="trigger"
        :trigger="[
            'scale-100',
            'scale-125 rotate-45',
            'scale-100 rotate-0',
        ]"
        class="w-16 h-16"
    />

    <button @click="trigger = !trigger">Animate</button>
</template>

<script>
import Motion from 'tinymotion';

export default {
    components: { Motion },

    data() {
        return {
            trigger: false,
        }
    }
}
</script>