tailwindcss animate

tailwindcss-animate

尾風CSS插件，用於創建美麗的動畫。

 <!-- Add an animated fade and zoom entrance -->
< div class =" animate-in fade-in zoom-in " > ... </ div >

<!-- Add an animated slide to top-left exit -->
< div class =" animate-out slide-out-to-top slide-out-to-left " > ... </ div >

<!-- Control animation duration -->
< div class =" ... duration-300 " > ... </ div >

<!-- Control animation delay -->
< div class =" ... delay-150 " > ... </ div >

<!-- And so much more! --> 

安裝

從NPM安裝插件：

npm install -D tailwindcss-animate

然後將插件添加到您的tailwind.config.js文件：

 // @filename tailwind.config.js
module . exports = {
	theme : {
		// ...
	} ,
	plugins : [
		require ( "tailwindcss-animate" ) ,
		// ...
	] ,
} 

文件

• 基本用法
  • 更改動畫延遲
  • 改變動畫方向
  • 更改動畫持續時間
  • 更改動畫填充模式
  • 改變動畫迭代計數
  • 改變動畫播放狀態
  • 更改動畫正時功能
  • 喜歡減少動作
• 輸入和退出動畫
  • 添加輸入動畫
  • 添加出口動畫
  • 更改輸入動畫開始不透明
  • 更改輸入動畫開始旋轉
  • 更改輸入動畫開始量表
  • 更改輸入動畫開始翻譯
  • 更改出口動畫結束不透明度
  • 更改出口動畫結束旋轉
  • 更改出口動畫結局量表
  • 更改出口動畫結局翻譯

基本用法

更改動畫延遲

使用delay-{amount}實用程序來控制元素的animation-delay 。

 < button class =" animate-bounce delay-150 duration-300 ... " > Button A </ button >
< button class =" animate-bounce delay-300 duration-300 ... " > Button B </ button >
< button class =" animate-bounce delay-700 duration-300 ... " > Button C </ button >

在動畫延遲文檔中了解更多信息。

改變動畫方向

使用direction-{keyword}實用程序來控制元素的animation-delay 。

 < button class =" animate-bounce direction-normal ... " > Button A </ button >
< button class =" animate-bounce direction-reverse ... " > Button B </ button >
< button class =" animate-bounce direction-alternate ... " > Button C </ button >
< button class =" animate-bounce direction-alternate-reverse ... " > Button C </ button >

在動畫方向文檔中了解更多信息。

更改動畫持續時間

使用duration-{amount}實用程序來控制元素的animation-duration 。

 < button class =" animate-bounce duration-150 ... " > Button A </ button >
< button class =" animate-bounce duration-300 ... " > Button B </ button >
< button class =" animate-bounce duration-700 ... " > Button C </ button >

在動畫持續時間文檔中了解更多信息。

更改動畫填充模式

使用fill-mode-{keyword}實用程序來控制元素的animation-fill-mode 。

 < button class =" animate-bounce fill-mode-none ... " > Button A </ button >
< button class =" animate-bounce fill-mode-forwards ... " > Button B </ button >
< button class =" animate-bounce fill-mode-backwards ... " > Button C </ button >
< button class =" animate-bounce fill-mode-both ... " > Button C </ button >

在動畫填充模式文檔中了解更多信息。

改變動畫迭代計數

使用repeat-{amount}實用程序來控制元素的animation-iteration-count 。

 < button class =" animate-bounce repeat-0 ... " > Button A </ button >
< button class =" animate-bounce repeat-1 ... " > Button B </ button >
< button class =" animate-bounce repeat-infinite ... " > Button C </ button >

在動畫迭代計數文檔中了解更多信息。

改變動畫播放狀態

使用running和paused實用程序來控制元素的animation-play-state 。

 < button class =" animate-bounce running ... " > Button B </ button >
< button class =" animate-bounce paused ... " > Button A </ button >

在動畫播放狀態文檔中了解更多信息。

更改動畫正時功能

使用ease-{keyword}實用程序來控制元素的animation-timing-function 。

 < button class =" animate-bounce ease-linear ... " > Button A </ button >
< button class =" animate-bounce ease-in ... " > Button B </ button >
< button class =" animate-bounce ease-out ... " > Button C </ button >
< button class =" animate-bounce ease-in-out ... " > Button C </ button >

在動畫正時功能文檔中了解更多信息。

喜歡減少動作

對於用戶指定他們更喜歡減少運動的情況，您可以使用motion-safe和motion-reduce變體有條件地應用動畫和過渡：

 < button class =" motion-safe:animate-bounce ... " > Button B </ button >

輸入和退出動畫

添加輸入動畫

要給元素一個輸入動畫，請使用animate-in程序，並結合一些fade-in ， spin-in ， zoom-in和slide-in-from實用程序中。

 < button class =" animate-in fade-in ... " > Button A </ button >
< button class =" animate-in spin-in ... " > Button B </ button >
< button class =" animate-in zoom-in ... " > Button C </ button >
< button class =" animate-in slide-in-from-top ... " > Button D </ button >
< button class =" animate-in slide-in-from-left ... " > Button E </ button >

在Enter動畫文檔中了解更多信息。

添加出口動畫

要給元素一個出口動畫，請使用animate-out ，並結合一些fade-out ， spin-out ， zoom-out和slide-out-from 。

 < button class =" animate-out fade-out ... " > Button A </ button >
< button class =" animate-out spin-out ... " > Button B </ button >
< button class =" animate-out zoom-out ... " > Button C </ button >
< button class =" animate-out slide-out-from-top ... " > Button D </ button >
< button class =" animate-out slide-out-from-left ... " > Button E </ button >

在“出口動畫文檔”中了解更多信息。

更改輸入動畫開始不透明

使用fade-in-{amount}實用程序設置動畫的起始不透明度。

 < button class =" animate-in fade-in ... " > Button A </ button >
< button class =" animate-in fade-in-25 ... " > Button B </ button >
< button class =" animate-in fade-in-50 ... " > Button C </ button >
< button class =" animate-in fade-in-75 ... " > Button C </ button >

在“ Enter Animation obacity文檔”中了解更多信息。

更改輸入動畫開始旋轉

使用spin-in-{amount}實用程序設置動畫的起始旋轉。

 < button class =" animate-in spin-in-1 ... " > Button A </ button >
< button class =" animate-in spin-in-6 ... " > Button B </ button >
< button class =" animate-in spin-in-75 ... " > Button C </ button >
< button class =" animate-in spin-in-90 ... " > Button C </ button >

在Enter Animation旋轉文檔中了解更多信息。

更改輸入動畫開始量表

使用zoom-in-{amount}實用程序設置動畫的起始量表。

 < button class =" animate-in zoom-in ... " > Button A </ button >
< button class =" animate-in zoom-in-50 ... " > Button B </ button >
< button class =" animate-in zoom-in-75 ... " > Button C </ button >
< button class =" animate-in zoom-in-95 ... " > Button C </ button >

在“ Enter Animation Scale”文檔中了解更多信息。

更改輸入動畫開始翻譯

使用slide-in-from-{direction}-{amount}實用程序設置動畫的啟動翻譯。

 < button class =" animate-in slide-in-from-top ... " > Button A </ button >
< button class =" animate-in slide-in-from-bottom-48 ... " > Button B </ button >
< button class =" animate-in slide-in-from-left-72 ... " > Button C </ button >
< button class =" animate-in slide-in-from-right-96 ... " > Button C </ button >

在Enter Animation翻譯文檔中了解更多信息。

更改出口動畫結束不透明度

使用fade-out-{amount}實用程序設置動畫的結局不透明度。

 < button class =" animate-out fade-out ... " > Button A </ button >
< button class =" animate-out fade-out-25 ... " > Button B </ button >
< button class =" animate-out fade-out-50 ... " > Button C </ button >
< button class =" animate-out fade-out-75 ... " > Button C </ button >

在“出口動畫”不透明文檔中了解更多信息。

更改出口動畫結束旋轉

使用紡紗spin-out-{amount}實用程序設置動畫的結尾旋轉。

 < button class =" animate-out spin-out-1 ... " > Button A </ button >
< button class =" animate-out spin-out-6 ... " > Button B </ button >
< button class =" animate-out spin-out-75 ... " > Button C </ button >
< button class =" animate-out spin-out-90 ... " > Button C </ button >

在出口動畫中了解更多信息。

更改出口動畫結局量表

使用zoom-out-{amount}實用程序設置動畫的結尾刻度。

 < button class =" animate-out zoom-out ... " > Button A </ button >
< button class =" animate-out zoom-out-50 ... " > Button B </ button >
< button class =" animate-out zoom-out-75 ... " > Button C </ button >
< button class =" animate-out zoom-out-95 ... " > Button C </ button >

在出口動畫量表文檔中了解更多信息。

更改出口動畫結局翻譯

使用slide-out-to-{direction}-{amount}實用程序設置動畫的結尾翻譯。

 < button class =" animate-out slide-out-to-top ... " > Button A </ button >
< button class =" animate-out slide-out-to-bottom-48 ... " > Button B </ button >
< button class =" animate-out slide-out-to-left-72 ... " > Button C </ button >
< button class =" animate-out slide-out-to-right-96 ... " > Button C </ button >

在退出動畫中了解更多文檔。