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