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 >

在退出动画中了解更多文档。