Color Wheel Animation with CSS Filters

Datetime:2016-08-23 01:36:20          Topic: CSS           Share

A few months ago I ran into the NSConf Argentina website by Aerolab and I instantly fell in love with those crazy gradients. My animation monster told me to animate them, so I set to work!!

First of all, how was the gradient in those buttons applied? A short trip to Dev Tools answered, it was border-image with a gradient. GREAT!

So I made a simple demo of those buttons:

See the Pen Color button – Based on NSConf by Evangelina Ferreira ( @evaferreira ) on CodePen .

Now, all I needed was to apply a crazy transition, to make the grandient animate.  For that, I’m taking advantage of the hue-rotate() filter property, it will go from 0deg to 360deg in a 4 seconds transition. Let’s see the result! (Psst! Hover over it!)

See the Pen Color button – Animated gradient by Evangelina Ferreira ( @evaferreira ) on CodePen .

Now to the important part, how does this work?

Hue-Rotate is a filter that uses degrees; that’s because it’s based on the color wheel, it will go from zero degrees (current color) to 360 degrees (all around the circle, back to the first point). Whenever we apply this with a transition, no matter the original background-image or color, that will make a 360deg turn going from one color to the other until it reaches its original position. If the color is more saturated, the result will be so; if it’s darker, it will be darker; and so on. Pretty cool!

You can use this on animations or transitions and make your inner animation monster happier with just a little bit of rainbow colors!

See the Pen Rainbow animations by Evangelina Ferreira ( @evaferreira ) on CodePen .





About List