TailwindCSS 是一个流行的 CSS 框架，它提供了丰富的 CSS 类来简化前端页面的样式设置。默认情况下，TailwindCSS 中提供了很多的过渡效果和动画，但是它们并不总是符合我们自己的需求。如何自定义 TailwindCSS 的动画效果呢？本文将向你介绍如何使用自定义动画效果，包括如何定义关键帧和使用 @keyframes。
1. 构建自定义动画效果
我们首先需要构建自己的动画效果，这可以通过 CSS 的 @keyframes 定义和一些基本的 CSS 属性完成。
使用 @keyframes 定义我们的动画帧：
@keyframes slideIn { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
在这个例子中，我们定义了一个简单的 slideIn 动画，它将元素从左到右滑动。在这个动画帧中，我们还可以定义其他的特效，如旋转、改变透明度等等。
完成动画的定义后，我们就可以在 TailwindCSS 中使用了。
2. 使用自定义动画效果
在 TailwindCSS 中使用动画效果，需要使用以下两个类：
duration-${time}：设置动画时长。在${time}中，可以使用ms代表毫秒，也可以使用s代表秒。animate-${effect}：启用动画效果。在${effect}中，填入我们在第一步中定义的动画名。
例如，我们想要一个 slideIn 的动画在 1 秒钟内完成，HTML 元素应该如下：
<div class="duration-1000 animate-slideIn"> 我是要执行的动画 </div>
这段代码将为元素添加一个 1 秒钟的 slideIn 的动画效果，实现了从左到右的滑动效果。
3. 完整的示例代码
最后，我们来看一个完整的 TailwindCSS 自定义动画的示例代码。它实现了 “抖动” 的效果：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------------------------------------------------------------- ------- ---------- ----- - -- - ---------- ------------- - --- - ---------- -------------- - --- - ---------- --------------- - --- - ---------- -------------- - ---- - ---------- ------------- - - -------- ------- ------ ---- -------------- ------------- --- --------------- --------- -------------- -------------- ------------- ------------- ----------- ----- ----- -- -------------- --------- ------------- ------ ---------- ---- --- ---- -- -------------- --------- ------------- ---- ------------- --------------- ----- ---- ------ ------- -------展开代码
在这个例子中，我们通过 CSS 的 @keyframes 定义了 shake 动画效果，并利用 TailwindCSS 中提供的类 animate-${effect} 和 duration-${time} 来使用这个动画。最终将 shake 动画发挥出了最大的效果。
总结：在 TailwindCSS 中使用自定义动画确实很容易，只需要定义动画帧、设置时长和使用启动动画的 TailwindCSS 类即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b89dd48841e989484dab0
