How to create an animation sequence with Tailwind?

I have the following element:

<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>

And I’m looking to create an animation sequence with Tailwind.

For the sequence, first rounded-s-full should take 0.3 seconds to apply in smooth fashion and after that, border-[12px] should take 0.3 seconds to "grow". I wonder if this can be achieved with Tailwind. In the documentation I was only able to find how you can apply transitions to specific properties and I could find anything to delay animations.

>Solution :

you can create animation sequences by defining custom CSS classes and using the transition property to specify the duration of the transitions. You can also use the delay property to delay animations.

<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>

In your CSS (you can either add this to your existing CSS file or use a tool like @apply with PostCSS if you’re using Tailwind CSS with PostCSS), define the animation classes

@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 */
}