circle()
’s radius is ready to the registered customized property, --circleSize
, which is then independently modified on hover utilizing a transition
. The result’s one thing near Materials Design’s ripple impact, and we will do it as a result of we’ve advised CSS to deal with the customized property as a proportion worth relatively than a string:
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.
ingredient or both thewhite-space
ortext-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 ofrgb(224, 236, 236)
and updates topink
.--c2
: Begins with a coloration worth ofrgb(92, 198, 162)
and updates toclear
.--l
: Begins with size worth5px
and updates to100%
.--a
: Begins with an angle worth of180deg
and updates to90deg
.
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.
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)