An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
We can finally animate CSS gradient
Hold on Firefox users the below is only supported on Chrome and Edge for now.
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 allow us to explicitely 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 propertys value is parsed at computed value time.
Considering this we simply need to use the variables inside gradient definition and we 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 --c{ 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
Original Link: https://dev.to/afif/we-can-finally-animate-css-gradient-kdk
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To