DEV Community

Cover image for We can finally animate CSS gradient

We can finally animate CSS gradient

Temani Afif on February 26, 2021

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 ...
Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

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 😪

Collapse
 
afif profile image
Temani Afif

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 ;) )

Collapse
 
tarasis profile image
Robert McGovern

The firefox team won't take too long to bring support to this ;)

Nearly 3 years later and we are still waiting on Firefox sigh

At least we are up to 87% coverage

Collapse
 
grahamthedev profile image
GrahamTheDev

What is the roadmap for chrome and safari on iOS, I couldn’t find it as it doesn’t seem to work there yet 😔

Thread Thread
 
afif profile image
Temani Afif

Ah forget the iOS people. You can find more details here: ishoudinireadyyet.com/ (it's the Properties & Values API)

Collapse
 
bilelz profile image
Bilelz

thanks! really amazing

Collapse
 
devmount profile image
Andreas • Edited

A little typo in your code example above the complex animation section: you define --c but then use --a.

Great article though, thanks!

Collapse
 
afif profile image
Temani Afif

Thanks, updated

Collapse
 
gr33nlight profile image
Bruno

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?

Collapse
 
bijan profile image
Bijan

Super excited to see how this gets implemented!

Collapse
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

Oh this is exciting!

Collapse
 
carolmckay profile image
CarolMcKay

Whoa! Wonderful! I have seen @property but thankyou for explaining it so well.

Collapse
 
eboye profile image
eboye

Cool, but I'll wait Firefox support to start tickling around :D

Collapse
 
rahxuls profile image
Rahul

This is an amazing article. You should have submitted to CSS-Tricks.com

Collapse
 
msyyn profile image
Mika

This looks good! Thanks for sharing

Collapse
 
afif profile image
Temani Afif

welcome :) say tuned, more fancy tricks are coming ;)

Collapse
 
julesparra profile image
Jules Parra

thanks for the breakdown!! using keyframes really brings it together - excited to make magic✨

Collapse
 
emafriedrich profile image
Emanuel Friedrich

great, thanks!

Collapse
 
fanyak profile image
Fani Akritidou

thanks! great examples

Collapse
 
eioluseyi profile image
Emmanuel Imolorhe | EIO

I knew there had to be a pure css solution to this, not requiring Js.
Thanks for sharing!