从零开始，探索如何使用 TailwindCSS 自定义动画

Tailwind CSS是一种颠覆性的CSS框架，改变了开发者处理前端开发的方式。它的低级性和移动优先的方法使得它成为设计独特、响应式和可扩展的网页设计的热门选择。此外，它还具有强大的动画支持，使开发者能够构建引人入胜的用户体验，吸引访问者。

本文将详细介绍如何使用TailwindCSS进行动画设计。我们将逐步介绍框架提供的不同种类的动画，并提供步骤说明，帮助您将它们整合到应用程序中。本文将引导个人通过添加简单的悬停动画以及更复杂的动画来掌握必要的技能和专业知识，为您的网站创建引人入胜的动画效果。

建立开发环境

1、首先，我们应该在React应用程序中安装和设置TailwindCSS，具体步骤如下：通过运行以下命令并选择React作为框架来创建一个React应用程序：

npm init vite

2、接下来，使用以下命令安装TailwindCSS和其他依赖项，如postcss和autoprefixer：

npm install -D tailwindcss postcss autoprefixer

3、运行命令 "npx tailwindcss init -p" 来创建配置文件，并打开 tailwind.config.js 文件，将其内容替换为提供的代码片段。

/** @type {import('tailwindcss').Config} */

module.exports = {
content: [
   "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
   extend: {},
 },
 plugins: [],
}

最后，在 src/index.css 文件中粘贴以下代码片段：

@tailwind base;
@tailwind components;
@tailwind utilities;

现在我们可以在React应用程序中使用TailwindCSS了。

深入了解TailwindCSS动画，为现代网页设计增添视觉魅力

Tailwind CSS默认提供了四个动画属性，用于为您的网页添加一些视觉效果。这些动画旨在简单地集成到您的项目中，以改善用户体验。

在这里，我们将详细介绍每个动画，提供完整的示例，演示如何将它们整合到我们的网站设计中。

animate-spin

想要在您的网站上添加加载或旋转动画吗？只需包含 "animate-spin" 属性，动画将自动应用。让我们来看一个例子。

import React from 'react';

function App() {
   return (
       <div className='w-screen h-screen flex justify-center items-center'>
           <button
               type="button"
               className="flex bg-red-500 text-white px-4 py-2 rounded-md"
           >
               <svg className="h-5 w-5 mr-3 animate-spin" viewBox="0 0 24 24">
                   <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                   <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647zM12 20.735a8 8 0 008-8h4a12 12 0 01-12 12v-4.265zM20 12a8 8 0 01-8 8v4.265a12 12 0 0012-12h-4zm-8-6.735a8 8 0 018-8v-4.265a12 12 0 00-12 12h4z" />
               </svg>
               Processing...
           </button>
       </div >
   );
}


export default App;

运行后的效果如下：

animate-pulse

除了 "animate-spin" 属性外，TailwindCSS 还提供了 "animate-pulse" 属性，用于淡入淡出元素。这个属性特别适用于创建骨架加载器和其他类似的视觉效果。

import React from 'react';

function App() {
   return (
       <div className='w-screen h-screen flex justify-center items-center'>
           <button
               type="button"
               className="flex bg-red-500 text-white px-4 py-2 rounded-md animate-pulse"
           >
               <svg className="h-5 w-5 mr-3 animate-spin" viewBox="0 0 24 24">
                   <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                   <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647zM12 20.735a8 8 0 008-8h4a12 12 0 01-12 12v-4.265zM20 12a8 8 0 01-8 8v4.265a12 12 0 0012-12h-4zm-8-6.735a8 8 0 018-8v-4.265a12 12 0 00-12 12h4z" />
               </svg>
               Processing...
           </button>
       </div >
   );
}

export default App;

运行后的效果如下：

animate-bounce

要使元素上下弹跳，只需使用 animate-bounce。如果您想引起注意，这是很有用的。

import React from 'react';

function App() {
   return (
       <div className='w-screen h-screen flex justify-center items-center'>
           <button
               type="button"
               className="flex bg-red-500 text-white px-4 py-2 rounded-md animate-bounce">
               Processing...
           </button>
       </div >
   );
}

export default App;

运行后的效果如下：

animate-ping

最后一个TailwindCSS动画属性是 animate-ping。这个属性创建了一个雷达信号或水波纹效果，非常适合通知徽章和其他类似的设计元素。

import React from 'react';

function App() {
   return (
       <div className='w-screen h-screen flex justify-center items-center'>
           <button
               type="button"
               className="flex bg-red-500 text-white px-4 py-2 rounded-md animate-ping"
           >
               Processing...
           </button>
       </div >
   );
}

export default App;

运行后的效果如下：

这些是默认的动画，也可以应用于悬停或激活状态：

<button type="button" className="hover:animate-ping"> Processing… </button>

这些动画可以应用于响应式断点。

<button className="md:animate-ping">Processing…</button>

注：当屏幕宽度大于等于 md （medium）断点时，为按钮元素添加动画效果 animate-ping，以增强用户体验。同时，按钮上显示 "Processing..." 文字，表示正在处理中。

使用TailwindCSS创建自定义动画

TailwindCSS通过传递单个属性，提供了一个简单的方法来使用内置动画。但是，开发者也可以根据自己的要求创建自定义动画。

例如，您可以通过修改 "tailwind.config.css" 文件来设计独特的动画。这使开发者能够生成与其项目需求完全适配的动画。

在 tailwind.config.js 文件中：

/** @type {import('tailwindcss').Config} */


module.exports = {
 content: [
   "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
   extend: {
     animation: {
       'button-rotate': 'button-rotate 2s ease-in-out infinite',
     },
     keyframes: {
       'button-rotate': {
         '0%': { transform: 'scale(1) rotate(0deg)' },
         '50%': { transform: 'scale(1.5) rotate(180deg)' },
         '100%': { transform: 'scale(1) rotate(360deg)' },
       },
     },
   },
 },
 plugins: [],
}

在这个例子中，它创建了一个名为 "button-rotate" 的自定义动画，包括一个无限循环、一个 "ease-in-out" 缓动函数和每个循环持续时间为两秒。

App.js

import './App.css';

function App() {
 return (
   <div class="flex justify-center items-center h-screen w-screen">
     <button class="animate-button-rotate bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
       Click Me
     </button>
   </div>
 )
}

export default App;

运行后的效果如下：

利用任意值进行TailwindCSS动画

使用 TailwindCSS，开发者可以在框架内使用独特的 CSS 属性，这得益于一个称为 "任意值" 的功能。

通过在 TailwindCSS 类中添加方括号中的值，此功能使设计方面的调整如位置和填充变得更加灵活。

例如，我们可以包括 padding-[5px]、bottom-[17px] 等属性。

简而言之，TailwindCSS 中的任意值特性提供了灵活性和定制选择，快速生成具有美观效果的网页设计。

同样的，也可以用来创建自定义动画。

import React from ‘react’;

function App() {
 return (
   <div class="flex justify-center items-center h-screen w-screen">
     <button class="animate-[wiggle_1s_ease-in-out_infinite] bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
       Click Me
     </button>
   </div>
 );
}

export default App;

这里我们使用了 "animate-[
wiggle_1s_ease-in-out_infinite]"，具有特定的设置。现在，让我们立即指定关键帧。

tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
 content: [
   "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
   extend: {
     keyframes: {
       'wiggle': {
         '0%': { transform: 'scale(1) rotate(0deg)' },
         '50%': { transform: 'scale(1.5) rotate(180deg)' },
         '100%': { transform: 'scale(1) rotate(360deg)' },
       },
     },
   },
 },
 plugins: [],
}

这样做的结果将与我们在自定义动画部分指定的相同。

结束

当您掌握了 TailwindCSS 的动画功能后，您将可以通过使用内置动画属性或创建自定义动画来轻松地为网页增添视觉效果，从而提升用户体验。

通过在 TailwindCSS 类中使用任意值，您还可以调整设计方面的其他细节。这个特性提供了灵活性和个性化的选择，以便快速生成美观的网页设计。

希望您通过本文学习到如何使用 TailwindCSS 创建自定义动画，并能将这些知识应用到您的网页设计中。

在文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

原文：
https://levelup.gitconnected.com/customizing-tailwind-css-animations-advancing-your-web-design-skills-dc9667494993

作者：Nitin Sharma

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正