tailwindcss motion

✨ 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 >

• 调整motion-preset-slide-right的持续时间：

 < div class =" motion-preset-slide-right motion-duration-2000 " > </ div >

• 增加motion-preset-bounce的高度：

 < div class =" motion-preset-bounce -motion-translate-y-in-150 " > </ div > 

基础动画

除了预设之外，您还可以通过组合这些基类来创建自己的自定义动画：

• 淡入： motion-opacity-in-0
• 滑入：
  • 从下面开始： motion-translate-y-in-100
  • 从上面： -motion-translate-y-in-100
• 缩放： motion-scale-in-75
• 旋转入：
  • 从 180 度开始： motion-rotate-in-180
  • 从 -90 度开始： -motion-rotate-in-90
• 模糊输入： motion-blur-in-sm
• 灰度输入： motion-grayscale-in
• 背景颜色变化： motion-bg-in-red-500
• 文本颜色更改： motion-text-in-blue-500

组合动画

您可以在单个元素上组合多个动画：

 < div
  class =" motion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 "
> </ div >

退出动画

对于退出动画，只需将类名称中的in替换为out即可。

修饰符

您可以自定义任何动画的持续时间、延迟和计时功能。

• 持续时间： motion-duration-500
• 延迟： motion-delay-500
• 计时功能： motion-timing-spring-bouncy

例如：

 < div
  class =" motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

这会将 2000 毫秒的持续时间应用于旋转和不透明度动画。

每个属性的修饰符

您可以使用斜杠/将修饰符应用于特定属性。

例如：

 < div
  class =" motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

这里，500ms 的延迟仅应用于旋转，而不应用于不透明度。

缓动功能

该插件包括自定义计时功能：

一些例子是：

• motion-ease-spring-smooth
• motion-ease-spring-snappy
• motion-ease-spring-bouncy
• motion-ease-spring-bounciest
• motion-ease-bounce
• motion-ease-bounce
• motion-ease-in-quart

示例

登陆页面 - https://play.tai​​lwindcss.com/uAuVF8F1vC

聊天对话框 - https://play.tai​​lwindcss.com/gjGqEKswjQ

低电量动态岛 - https://play.tai​​lwindcss.com/tvYFbHtNNQ

苹果颜色样本 - https://play.tai​​lwindcss.com/cvQ3Nk3v8j

龙博是什么？

Rombo 是一家早期公司，致力于开发工具来帮助公司构建漂亮的交互界面。我们开始为工程师、设计师和创意营销人员提供一个工具包，以便在常见工作流程中本地制作动画 - 例如 Tailwind、Figma、Webflow、Shopify 等！在我们的网站上注册更新：https://rombo.co