We can FINALLY animate gradients with CSS! скачать в хорошем качестве

We can FINALLY animate gradients with CSS!

Gradients are one of those things that you can not animate in CSS. Until NOW. With the introduction of the @ property rule in CSS, you can define the type of a css variable (css custom property). And defining a specific variable as being a color, now gives you the ability to animate a variable from one color to another. And if you then use that variable inside a gradient, that gradient will also animate from one color to another! Let's explore that together in today's video! 👀 Timestamps 00:00 - Intro 00:43 - What we'll be building 01:56 - Start building, taking a lot at the starting point 04:53 - Add dynamic gradient in the background 07:12 - Animating the custom properties 08:49 - Intro into CSS @ property 10:13 - Animating the gradient by adding @ property 12:48 - Add extra animated blobs 19:13 - Short recap of what we did to animate the gradient 20:19 - Demo of how this looks in Firefox 21:05 - Outro 🔗 Live playground and code: https://www.frontend.fyi/v/animated-g... 🔗 At Property Browser Support: https://caniuse.com/mdn-css_at-rules_... 🔗 Design used as inspiration: https://dribbble.com/shots/20059351-P... 💬 Join us on Discord: https://www.frontend.fyi/discord 🐦 Follow me on Twitter:   / jeroenreumkens   &   / frontend_fyi   👨‍🏫 Check my mentorships: https://www.jeroenreumkens.nl/mentoring #gradients #animations #html #css #tailwind #frontend