Browser Power

I was playing around with CSS3 animations and what can be done with them, and I wanted to try to animate text that rotates its color through the color wheel. So, I made up the keyframes using HSL values with 12-steps, each advancing 30 degrees along the color wheel.

That worked so well, I did it in a darker palette and lighter palette, and I also made keyframes for animating the text-shadow and the background color. Here is the result:

Yes, it can be overdone and that sample page looks pretty crazy, but if used subtly, it can be a nice effect. At the bottom, you'll see the darker font palette on a cycling background, each with long animation times (it will take 5 minutes to go through the entire color wheel). It's a nice subtle effect.

Feel free to use whatever, but I'd love to know if you find it useful. I've also posted the CSS in a Gist, which you can find here: https://gist.github.com/dwcullop/f81ffaba522d26f82148b79f560a6b3c


522 0 0