Enable Gradient Animation using @property

[alex-krasikau]

As @Property becomes well supported across modern browsers, it would be great to make updates that would enable the animation of existing properties.

In this particular case, I'm exclusively discussing the animation of gradients, but it's possible that there are other good candidates for this update.

Currently Available Solutions

To showcase the current state of animating gradient backgrounds, I've created a repository showcasing different approaches.
Repo - GitHub Repository
Demo - Live Demo

In the current state, CSS doesn't support the animation of background gradients. There are three main ways to build it (within the context of the button hover state):

1. Use an absolutely positioned box with a gradient background hidden using opacity by default and remove the opacity on hover - code. This provides a decent visual effect but introduces inconsistency if you would like to use the alpha channel. Another major issue with this approach is a more complex layout of the component. This is also the longest and least clear code compared to the other options.

2. Use a tall background and animate the background position - code. This one doesn't look as good visually because it looks more like a slide rather than a transition of colors. It also doesn't support more than two states of the gradients as switching between 1 and 3 would result in a weird middle state.

3. Interpolate values using JavaScript. This is a good working option but requires using a JavaScript library, which could be overhead in most cases.

@Property Solution

On the other hand, @Property introduces the ability to animate custom properties themselves, and they, in turn, will update the background gradient. @Property is well supported now; using it doesn't introduce breaking changes. Browsers that don't support it will simply not play the animation but will shift to the end state right away.

We can start using @Property without making any updates to Tailwind, but gradient color selection is written in a way that doesn't allow the property transition. However, this can be easily fixed without introducing breaking changes.

To showcase it, I copied the core gradient plugin into my repository and made the required changes within a single commit. Explanation:

Currently, to-color and from-color generate the following declarations:

--tw-gradient-from: {color} var(--tw-gradient-from-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

and

--tw-gradient-to: {color} var(--tw-gradient-to-position);

Meaning both --tw-gradient-from and --tw-gradient-to are composite and don't allow us to use @Property.

To change this, we can introduce a separate color variable that we will use for transition:

--tw-gradient-from-color: {color};
--tw-gradient-from: var(--tw-gradient-from-color) var(--tw-gradient-from-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

and

--tw-gradient-to-color: {color};
--tw-gradient-to: var(--tw-gradient-to-color) var(--tw-gradient-to-position);

After making these changes, we can add the properties declaration into the CSS - code:

@property --tw-gradient-from-color {
  syntax: "<color>";
  inherits: false;
}

@property --tw-gradient-to-color {
  syntax: "<color>";
  inherits: false;
}

And use transition-property to animate the colors. As Tailwind automatically wraps custom variables into var(), I had to add the gradient transition property into the Tailwind config - code:

transition-property: --tw-gradient-from-color, --tw-gradient-to-color;

@Property provides a simple solution without any issues, except for not having full browser support. As a showcase of it's capabilities, I implemented a keyframe gradient animation - code

Steps

If you agree to go forward with this proposal, it can be implemented in two steps:

1. Start by extracting the color into the separate --tw-gradient-(from|to)-color, enabling the usage of @Property declaration at the project level in CSS.
2. (Optional) Come up with an API for defining/injecting @Property declarations and maybe adding a gradient transition property similar to the one in the example repo.

Wrap up

I'm ready to create a PR with the implementation of the first step I described and participate in the discussion of the more global @Property solution for Tailwind. Please let me know your opinion on this, and feel free to ask questions if you need more details.