The Instances You Want A Customized @property As an alternative Of A CSS Variable — Smashing Journal

The liberty to outline and spec our personal CSS properties offers us new animating superpowers that had been as soon as solely attainable with JavaScript, like transitioning the colours of a gradient.

Right here’s an concept I’ve that makes use of the identical fundamental concept because the ripple, solely it chains a number of customized properties collectively which are formatted as colours, lengths, and angle levels for a extra advanced animation the place textual content slides up the container because the textual content adjustments colours.

Let’s use this demo as an train to be taught extra about defining customized properties with the @property at-rule, combining what we simply noticed within the ripple with the idea of interpolating gradient values.

The HTML

The HTML accommodates Chinese language characters we’re going to animate. These Chinese language characters are marked up with tags in order that their English translations may be equipped in tags. The concept is that .scrolling-text is the part’s mother or father container and, in it, is a toddler ingredient holding the sliding textual content characters that permit the characters to slip out and in of view.

Vertical Sliding

In CSS, let’s make the characters slide vertically on hover. What we’re making is a container with a hard and fast top we will use to clip the characters out of view after they overflow the accessible area.

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

Setting the .scrolling-text container’s width to min-content offers the characters a good match, stacking them vertically in a single column. The container’s top is ready 1lh. And since we’ve set overflow: hidden on the container, just one character is proven within the container at any given cut-off date.

Tip: You can too use the HTML

 ingredient or both the white-space or text-wrap properties to manage how textual content wraps.

On hover, the textual content strikes -2lh, or double the peak of a single textual content character within the reverse, or up, course. So, mainly, we’re sliding issues up by two characters so as to animate from the primary character to the third character when the container holding the textual content is in a hovered state.

Making use of Gradients To Textual content

Right here’s a enjoyable little bit of styling:

.textual content {
  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: textual content;
  coloration: clear; /* to point out the background beneath */
  background-size: 20% 20%;
}

How typically do you end up utilizing repeating gradients in your work? The enjoyable half, although, is what comes after it. See, we’re setting a clear coloration on the textual content and that enables the repeating-linear-gradient() to point out by it. However since textual content is a field like all the things else in CSS, we clip the background on the textual content itself to make it appear like the textual content is reduce out of the gradient.

Fairly neat, proper? Now, it seems to be like our textual content characters have a striped sample painted on them.

Animating The Gradient

That is the place we take the identical animated gradient idea lined in different tutorials and work it into what we’re doing right here. For that, we’ll first register a number of the repeating-linear-gradient() values as customized properties. However not like the opposite implementations, ours is a little more advanced as a result of we are going to animate a number of values relatively than, say, updating the hue.

As an alternative, we’re animating two colours, a size, 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  ";
  inherits: false;
  initial-value: 5px;

@property --angle {
  syntax: "";
  inherits: false;
  initial-value: 180deg;
}

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

We wish to replace the values of our registered customized properties when the container that holds the textual content is hovered or in focus. All that takes is re-declaring the properties with the up to date values.

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

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

To be tremendous clear about what’s taking place, these are the customized properties and values that replace on hover:

• --c1: Begins with a coloration worth of rgb(224, 236, 236) and updates to pink.
• --c2: Begins with a coloration worth of rgb(92, 198, 162) and updates to clear.
• --l: Begins with size worth 5px and updates to 100%.
• --a: Begins with an angle worth of 180deg and updates to 90deg.

So, the 2 colours used within the gradient transition into different colours whereas the general dimension of the gradient will increase and rotates. It’s as if we’re choreographing a brief dance routine for the gradient.

Refining The Transition

All of the whereas, the .textual content ingredient containing the characters slides as much as reveal one character at a time. The one factor is that we’ve got to inform CSS what is going to transition on hover, which we do instantly on the .textual content ingredient:

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

Sure, I might simply as simply have used the all key phrase to pick out all the transitioning properties. However I desire taking the additional step of declaring every one individually. It’s slightly behavior to maintain the browser from having to observe for too many issues, which might sluggish issues down even a smidge.

Ultimate Demo

Right here’s the ultimate final result as soon as once more:

I hope this little train not solely demonstrates the types of fancy issues we will make with CSS customized properties but additionally helps make clear the variations between customized properties and commonplace variables. Normal variables are glorious placeholders for extra maintainable code (and some fancy methods of their very own) however when you end up needing to replace one worth in a property that helps a number of values — corresponding to colours in a gradient — the @property at-rule is the place it’s at as a result of it lets us outline variables with a customized specification that units the variable’s syntax, preliminary worth, and inheritance conduct.

After we get to amend values individually and independently with a promise of animation, it each helps streamline the code and opens up new potentialities for designing elaborate animations with comparatively nimble code.

That’s why @property is a helpful CSS commonplace to remember and preserve prepared to make use of if you find yourself fascinated with animations that contain remoted worth adjustments.

Additional Studying On SmashingMag

(gg, yk)