tailwindcss-motion 一个简单、功能强大的动画库

今天盯着博客的页面，就觉的少点什么？对，就是动画，一动不动的太死板了，得搞些动画，但是如果手动编写JavaScript和CSS动画，不符合现代前端的构建方式，所以就搜了一下tailwind相关的动画插件，最终选定：tailwindcss-motion

安装

npm i -D tailwindcss-motion

添加到你的tailwind.config.js：

    // tailwind.config.js

    export default {
        content: [...],
        theme: {
            extend: {...},
        },
        plugins: [require('tailwindcss-motion')],
    };

或者，要使用 ESM：

import tailwindcssMotion from "tailwindcss-motion";

/** @type {import('tailwindcss').Config} */
export default {
    content: [...],
    theme: {
        extend: {},
    },
    plugins: [tailwindcssMotion],

};

然后在你的项目中，要使用动画的元素上添加class:

<div class="motion-preset-pulse"></div>

动画效果

https://rombo.co/tailwind/

在官方的主页上，有个动画的选择器，点选自己喜欢的动画效果，然后复制class添加到元素的class中就好了，还有高级的动画定制，很高科技！

具体效果可以参看本站的动效。

总结

如果你的项目也是使用tailwind，需要添加动效动画，可以考录tailwindcss-motion这个插件，真的不错。