Question 269616 in Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0

    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 */
}
    Login or Signup to reply.
  2. 0

    Alternatively, you could do this the "Tailwind way" by extending the theme configuration. Specifically, add to the keyframes and animation properties:

    export default {
  theme: {
    extend: {
      keyframes: {
        semicircle: {
          '0%': {
            borderWidth: '0',
            borderStartStartRadius: '0',
            borderEndStartRadius: '0'
          },
          '50%': {
            borderWidth: '0',
            borderStartStartRadius: '50%',
            borderEndStartRadius: '50%'
          },
          '100%': {
            borderWidth: '12px',
            borderStartStartRadius: '50%',
            borderEndStartRadius: '50%'
          },
        },
      },
      animation: {
        semicircle: 'semicircle 0.6s forwards',
      },
    },
  },
}

    Then call on the animation with the animation-semicircle class:

    <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="animate-semicircle border-indigo-400" alt="Placeholder" src="https://placehold.co/400x600" />
</div>

    Unfortunately it’s not possible to reliably animate to the "full" border radius – Tailwind uses a kind-of hack by specifying the full border radius as 9999px. Attempting to have CSS animate a border radius from 0px to 9999px in 0.3s, as you can imagine, results in a very quick snap.

    References:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search