Customizing animation repeat count and animation duration with utilities

[rozsazoltan]

Update

After understanding the implementation of variables, you can familiarize yourself with the animation-iteration-count and animation-duration property, which has been part of the baseline since 2015.

• animate-repeat-* and animate-duration-* with CSS variables
• animate-repeat-* and animate-duration-* with CSS animation properties
• CSS: animation-iteration-count - MDN Docs
• CSS: animation-duration - MDN Docs

/* Utility for Animation Timing */
@utility animate-duration-* {
  animation-duration: calc(--value(integer) * 1s);
}

/* Utility for Repeat Count */
@utility animate-repeat-* {
  animation-iteration-count: calc(--value(integer) * 1s)
}
@utility animate-repeat-infinite {
  animation-iteration-count: infinite;
}

• TailwindCSS v4 Playground

Original Code

The other day, I created utilities for customizing the repeat count and timing of any animation. I’ll leave them here in case they are useful for someone else:

• How to stop TailwindCSS animation after a set time

In the final solution, I was assisted by Wongjn's answer. The default animations can be overridden by using @theme inline instead of @theme to declare the animation. This doesn’t add any extra overhead if the animations used are already part of the project, as they will end up being part of the compiled CSS anyway.

• @utility for creating to modify the repeat count of pre-declared animations

Utility for Repeat Count - animate-repeat-*

@utility animate-repeat-* {
  --animate-bounce-count: --value(integer);
}

@utility animate-repeat-infinite {
  --animate-bounce-count: infinite;
}

• TailwindCSS v4 Playground

Utility for Animation Timing - animate-duration-*

@utility animate-duration-* {
  --animate-duration: calc(--value(integer) * 1s);
}

• TailwindCSS v4 Playground