Color animations and fades, SVG, Canvas, Jquery

Javascript can be used to animate color by calculating the between color values and writing each frame for a element. Canvas is an ideal choice to transform colors in this method because the methods used are standardized. Another alternative is to have two elements one transparent on top which has a key frame  color and use a jquery fade with this element and fade to or from the background element which has the second color.

SVG however is the easiest method —  an SVG tag is used <animateColor id=”a1″ attributeName=”fill” from=”red” to=”blue” dur=”3s”/> which only requires the key-frame values.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: