顺风运动

✨ tailwindcss-motion β ✨

tailwindcss-motion 是 RomboHQ 制作的 Tailwind CSS 插件。它是一个简单但功能强大的动画库，语法简单。

运动，没有骚动。

⚒️安装

1.安装npm包

npm i -D tailwindcss-motion

2. 添加到 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 ] ,
} ; 

它是如何运作的？

我们提供了一个简单的语法来为 Tailwind 项目中的任何元素设置动画。我们不定义自定义关键帧，而是提供实用程序类来内联动画每个维度。

例如，对于幻灯片和淡入淡出效果 - 您只需要motion-translate-x-in-25 motion-opacity-in-0 ，或者，您可以将我们的预设之一与motion-preset-fade一起使用

动作预设

我们提供一系列预设来轻松为您的组件设置动画：

• 淡入淡出： motion-preset-fade
• 滑动：
  • 右： motion-preset-slide-right
  • 左： motion-preset-slide-left
  • 向上： motion-preset-slide-up
  • 向下： motion-preset-slide-down
• 焦点： motion-preset-focus
• 模糊：
  • 右： motion-preset-blur-right
  • 左： motion-preset-blur-left
  • 上： motion-preset-blur-up
  • 向下： motion-preset-blur-down
• 弹跳： motion-preset-bounce
• 展开： motion-preset-expand
• 收缩： motion-preset-shrink
• 流行音乐： motion-preset-pop
• 压缩： motion-preset-compress
• 摇动： motion-preset-shake
• 摆动： motion-preset-wiggle
• 五彩纸屑： motion-preset-confetti
• 打字机： motion-preset-typewriter-[number of characters]
• Flomoji ： motion-preset-flomoji

自定义预设

您可以使用基本动画和修改器类进一步自定义预设。

例如：

• 添加延迟到motion-preset-fade ：

">

 < div class =" motion-preset-fade motion-delay-500 " >  div >