tailwindcss motion一个Tailwind CSS 动画插件

tailwindcss-motion

tailwindcss-motion 是 RomboHQ 制作的 Tailwind CSS 插件。 他可以在你使用tailwindcss的同时简单实现动画效果，语法简单。

1、了解

tailwindcss-motion提供了一种简单的语法来为 Tailwind 项目中的任何元素添加动画效果。我们不是定义自定义关键帧，而是提供实用程序类来内联为每个维度制作动画。

例如，对于滑动和淡入淡出效果 - 您只需要 OR，您可以将我们的预设之一与

motion-translate-x-in-25 motion-opacity-in-0

motion-preset-fade

2、安装 npm 包

npm i -d tailwindcss-motion

3、配置tailwind.config.js

// tailwind.config.js

export default {
     theme: {
        extend: {}, 
    },
   plugins: [require('tailwindcss-motion')], 
};

4、预设

提供了一系列预设，可轻松为您的组件制作动画：

• 淡化：

  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]

• 弗洛莫吉：

  motion-preset-flomoji

还提供了自定义预设的方法

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

例如：

登陆页面 - https://play.tailwindcss.com/uAuVF8F1vC

聊天对话框 - https://play.tailwindcss.com/gjGqEKswjQ

低电量 Dynamic Island - https://play.tailwindcss.com/tvYFbHtNNQ

Apple 色板 - https://play.tailwindcss.com/cvQ3Nk3v8j

更详细的可以访问 romboHQ/tailwindcss-motion