Composable animations⚡⚡⚡

[Larsklopstra]

Hey, recently I came across something I'd love to have in Tailwind CSS.

Case

Imagine you want a specific animation like a bouncing button to happen twice for 250ms with the ease-in-out transition timing. Currently, this is not possible, you'll have to do JavaScript which does something on x or write your own animation. This proposal will solve that.

Current implementation

.animate-bounce => animation: bounce 1s infinite;

Proposed implementation

.animate-bounce .animate-250ms .animate-count-2 => animation: bounce var(--animate-duration) var(--animate-count);

By default, the original values will be used for the variables so it'll stay backwards compatible. You could also introduce more variables if necessary such as animation-direction, animation-delay, or even animation-name!

Here's a more detailed example:

.animate {
  --animation-duration: 500ms;
  --animation-timing-function: linear;
  --animation-delay: 0;
  --animation-iteration-count: infinite;
  --animation-direction: forwards;

  animation-name: var(--animation-name);
  animation-duration: var(--animation-duration);
  animation-timing-function: var(--animation-timing-function);
  animation-delay: var(--animation-delay);
  animation-iteration-count: var(--animation-iteration-count);
  animation-direction: var(--animation-direction);
}

.animate-bounce {
  --animation-name: bounce;
}

.animate-ease-in-out {
  --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

You get the idea now, don't you?

Let me know what you think, it could be a powerful method to composite animations.

[kyotoprotokollet]

Totally agree. There is a plugin that allows for composable animations like this (https://github.com/benface/tailwindcss-animations) but it has beed deprecated since Tailwind launched their own animation feature.

However, tailwind animation support is not composable so it's not very powerful. Tailwind is using CSS variables more and more to allow for greater composability so this should be right up their alley.