Use CSS @property to Animate and Transition Custom Properties

Jhey Tompkins
InstructorJhey Tompkins
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

In this lesson, we take a look at how to animate and transition custom properties with CSS Houdini @property. It hasn't been possible to animate and transition background-images and other properties until now. This demo will show you how to define custom properties and define type checking for them.

Check for Browser Compatibility.

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.

egghead
egghead
~ 30 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today