Find out more CSS tricks at css-tip.com
Thanks to the new @property
defined in the CSS Properties and Values API Level 1 specification we can now have transition with custom properties (aka CSS variables).
@property --my-var {
syntax: '<integer>';
inherits: false;
initial-value: 0;
}
All the trick is within the syntax
part that allows us to explicitly define the type of the property thus the browser will know how to do the interpolation between values (the transition we want to have)
Specifies the syntax of the custom property registration represented by the @property rule, controlling how the property’s value is parsed at computed value time.
Considering this we simply need to use the variables inside the gradient definition and animate them.
Animate the colors
We use <color>
for the syntax
Animate the color size
We can use <percentage>
, <length>
or <angle>
based on each use case
Animate the direction
We use <angle>
Animate the position
We use <percentage>
or <length>
As you can see, it's easy and the code looks like the following in all the cases:
/* we define the variable */
@property --a{
syntax: '<percentage>'; /* its type */
inherits: false;
initial-value: 10%; /* the initial value */
}
/**/
.box {
transition:--a 0.5s; /* we add transition to it */
background:linear-gradient(red var(--a),blue); /* we use it inside the gradient */
}
.box:hover {
--a:50%; /* we update on hover */
}
We can have complex animation:
and use keyframes
Let's wait for this to be supported on Firefox and we can do a lot of magic with 😉
Top comments (21)
Finally I can launch my "acid trip rave party" website without relying on JavaScript to provide the psychedelic background!
Seriously though I can't wait to be able to use this (the
@property
methods, not the spinning gradients 😋) but it might be a while before support is good enough 😪I would say you will be able to use it within this year. The firefox team won't take too long to bring support to this ;)
Concerning the spinning gradients, it's a technique to hypnotise users to oblige them to give me some likes (it's working ;) )
Nearly 3 years later and we are still waiting on Firefox sigh
At least we are up to 87% coverage
What is the roadmap for chrome and safari on iOS, I couldn’t find it as it doesn’t seem to work there yet 😔
Ah forget the iOS people. You can find more details here: ishoudinireadyyet.com/ (it's the Properties & Values API)
thanks! really amazing
A little typo in your code example above the complex animation section: you define
--c
but then use--a
.Great article though, thanks!
Thanks, updated
Hello, I encountered a weird issue using this type of animation in a nextjs build. In development it works, but in production it doesn't work, as in it goes in huge chunks or it doesnt run at all. Has anyone encountered this kind of issue?
Super excited to see how this gets implemented!
Oh this is exciting!
Whoa! Wonderful! I have seen @property but thankyou for explaining it so well.
Cool, but I'll wait Firefox support to start tickling around :D
This is an amazing article. You should have submitted to CSS-Tricks.com
This looks good! Thanks for sharing
welcome :) say tuned, more fancy tricks are coming ;)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.