The Times You Need A Custom @property Instead Of A CSS Variable — Smashing Magazine

The freedom to define and specify our own CSS properties gives us new animation superpowers that were previously only possible with JavaScript, such as the transition of colors in a gradient.

Here’s an idea of ​​mine that’s based on the same basic idea as the wave, except that it chains together several custom properties formatted as colors, lengths, and degrees to create a more complex animation where text slides up in the container as the color changes.

Let us use this demo as an exercise to learn more about defining custom properties with the @property At-rule, which combines what we just saw in the wave with the concept of interpolation of gradient values.

The HTML

  

    

      壹one
      蜀two
      兩three
    
  

The HTML contains Chinese characters that we will animate. These Chinese characters are marked with Tags so that their English translations can be provided in Tags. The idea is that .scrolling-text is the parent container of the component and contains a child element that contains the floating text characters that allow the characters to slide in and out of view.

Vertical sliding

In CSS, let’s make the characters slide vertically on hover. We’ll create a container with a fixed height that will allow us to remove the characters from view when they exceed the available space.

.scrolling-text {
  height: 1lh;
  overflow: hidden;
  width: min-content;
}
.text-container:has(:hover, :focus) .text {
  transform: translateY(-2lh) ;
}
.text {
  transition: transform 2.4s ease-in-out;
}

Setting the .scrolling-text Width of the container on min-content gives the characters a tight space and stacks them vertically in a single column. The height of the container is set 1lhAnd since we overflow: hidden Only one character is displayed in the container at any given time.

Tip: You can also use the HTML

 element or either the white-space or text-wrap properties to control how text wraps.

On hover, the text moves -2lh, or double the height of a single text character in the opposite, or up, direction. So, basically, we’re sliding things up by two characters in order to animate from the first character to the third character when the container holding the text is in a hovered state.

Applying Gradients To Text

Here’s a fun bit of styling:

.text {
  background: repeating-linear-gradient(
    180deg, 
    rgb(224, 236, 236), 
    rgb(224, 236, 236) 5px, 
    rgb(92, 198, 162) 5px, 
    rgb(92, 198, 162) 6px);
  background-clip: text;
  color: transparent; /* to show the background underneath */
  background-size: 20% 20%;
}

How often do you use repeating gradients in your work? The fun part, however, is what comes after. See, we put a transparent Color on the text and this allows the repeating-linear-gradient() to show thereby. But since text, like everything else in CSS, is a fieldwe cut off the background of the text itself so that it looks like the text was cut out of the gradient.

Pretty cool, right? Now it looks like our text characters have a striped pattern painted on them.

Animating the gradient

Here we take the same animated gradient concept that has been covered in other tutorials and incorporate it into what we are doing here. To do this, we first register some of the repeating-linear-gradient() values ​​as custom properties. But unlike the other implementations, ours is a bit more complex because we will be animating multiple values ​​instead of updating the hue, for example.

Instead, we animate two colors, a length and an angle.

@property --c1 {
  syntax: "";
  inherits: false;
  initial-value: rgb(224, 236, 236);
}
@property --c2 {
  syntax: "";
  inherits: false;
  initial-value: rgb(92, 198, 162);
}
@property --l {
  syntax: " | ";
  inherits: false;
  initial-value: 5px;
}
@property --angle {
  syntax: "";
  inherits: false;
  initial-value: 180deg;
}

.text {
  background: repeating-linear-gradient(
    var(--angle), 
    var(--c1), 
    var(--c1) 5px, 
    var(--c2) var(--l), 
    var(--c2) 6px);
}

We want to update the values ​​of our registered custom properties when the container containing the text is hovered over or has focus. To do this, we simply need to redeclare the properties with the updated values.

.text-container:has(:hover, :focus) .text {
  --c1: pink;
  --c2: transparent;  
  --l: 100%;
  --angle: 90deg;

  background-size: 50% 100%;
  transform:  translateY(-2lh);
}

To make it very clear what is happening, these are the custom properties and values ​​that are updated on hover:

• --c1: Starts with a color value of rgb(224, 236, 236) and updates to pink.
• --c2: Starts with a color value of rgb(92, 198, 162) and updates to transparent.
• --l: Starts with length value 5px and updates to 100%.
• --a: Starts with an angle value of 180deg and updates to 90deg.

So the two colors used in the gradient fade into other colors while the overall size of the gradient increases and rotates. It's as if we were choreographing a short dance routine for the gradient.

Refine the transition

The whole time .text Element containing the characters slides up to display one character at a time. The only thing we need to tell CSS is what transition when hovering, which we see directly on the .text Element:

.text {
  transition: --l, --angle, --c1, --c2, background-size, transform 2.4s ease-in-out;
  transition-duration: 2s; 
}

Yes, I could just as well have all keyword to select all the transition properties. But I prefer to take the extra step of declaring each one individually. It's a little habit so the browser doesn't have to pay attention to too many things, which might slow things down even a little bit.

Final demo

Here again is the final result:

I hope this little exercise not only shows what great things we can do with CSS Custom Properties, but also helps to clarify the differences between custom properties and standard variables. Standard variables are great placeholders for more maintainable code (and some fancy tricks of their own), but if you need to update a value in a property that supports multiple values ​​– such as colors in a gradient – @property The key is the at rule, which allows us to define variables with a custom specification that defines the syntax, initial value, and inheritance behavior of the variable.

If we can change values ​​individually and independently with the prospect of animation, this not only helps streamline the code, but also opens up new possibilities for designing complex animations with relatively flexible code.

For this reason @property is a useful CSS standard to keep in mind and ready to use when thinking about animations that involve isolated value changes.

More information on SmashingMag

(yes, yes)