Use CSS @property to Animate and Transition Custom Properties

Jhey Tompkins: [0:00] Here we have an element with a linear gradient background image that uses a CSS variable as a color stop. Wave is set to 50%. When we hover the element, wave changes to 75%.

[0:11] We want to transition the color stop, so it moves smoothly between the two states. Using a transition: background, doesn't work. We can use CSS @property to give more contextual information to the browser, which will allow us to transition and animate CSS variables.

[0:26] Define a property using @property, and then a variable name, prefixed by two hyphens. Let's give our property an initial-value of 50%, an inherits of false, which tells the browser whether this value is inherited from the parent or not.

[0:42] Lastly, we define a syntax, which in this case is going to be percentage. We are using a value of percentage because our custom property wave is a percentage value. There are other values you can use for syntax such as image, URL, angle. Setting a syntax allows the browser to type-check our custom properties.

[1:01] We can now remove wave's declaration here because we have it set in the initial-value. If we set the transition to --wave .2s, we can now transition our linear-gradient on hover.

[1:13] Perhaps we'd like to add a second wave to our background image. You can see here, it's using a color stop of 60%. What if we wanted to also transition this? Let's create a second property called var wave-2. We'll transition this property the same as we do var wave. On hover wave-2 will go to 75%, and wave-1, we'll go to 65%.

[1:36] Now, we can add our second property wave-2, which is the same. Although, it has a different initial-value. Now, when we hover over our element, both of our waves transition.

[1:49] The real neat part is that we can also animate these properties. Let's create an animation waves that runs for 5s infinitely.

[1:58] In our keyframes, we're going to set at 50%, that wave is 65%, and wave-2 is 75%. We can get rid of our wave hover declaration and our transition. Reload the page. Now, we have an animated linear-gradient using CSS Houdini's app property to give the browser the contextual information it needs in order to animate and transition custom properties.

[2:27] In review, we can use CSS @property to define custom properties in our CSS, whilst providing more contextual information to the browser.

[2:34] Providing a type via the syntax property allows the browser to type-check our custom properties and this also provides us a way to transition and animate between the values of a custom property.