HTML 如何使用Tailwind创建动画序列

问题描述

我有以下元素：

<div dir="rtl" class="aspect-ratio-1 group relative h-min w-full max-w-[300px] flex-shrink-0 lg:max-w-[390px]">
  <img class="rounded-s-full border-[12px] border-indigo-400" alt="Placeholder" src="https://placehold.co/400x600" />
</div>

我正在寻求使用Tailwind创建一个动画序列。

对于这个序列，rounded-s-full应该以平滑的方式花费0.3秒进行应用，之后border-[12px]应该花费0.3秒进行“增长”。我想知道是否可以用Tailwind实现这一点。在文档中，我只找到了如何对特定属性应用过渡效果以及如何延迟动画的方法。

解决方案

你可以通过定义自定义的CSS类和使用过渡属性来创建动画序列，来指定过渡的持续时间。你也可以使用延迟属性来延迟动画。

<div dir="rtl" class="aspect-ratio-1 group relative h-min w-full max-w-[300px] flex-shrink-0 lg:max-w-[390px]">
  <img class="rounded-full animation1" alt="Placeholder" src="https://placehold.co/400x600" />
</div>

在您的CSS文件中（您可以将其添加到现有的CSS文件中，或者使用像PostCSS这样的工具与Tailwind CSS一起使用@apply），定义动画类。

@keyframes growBorder {
  0% {
    border-width: 0;
  }
  100% {
    border-width: 12px;
  }
}

@keyframes smoothRounded {
  0% {
    border-radius: 0;
  }
  100% {
    border-radius: 50%;
  }
}

.animation1 {
  animation-name: smoothRounded, growBorder;
  animation-duration: 0.3s, 0.3s;
  animation-timing-function: ease, ease;
  animation-fill-mode: both, both;
  animation-delay: 0s, 0.3s; /* Delay the border animation by 0.3s */
}