0 Hover Link Color Rainbow - Rainbow Color Effect with CSS3 Animation For Blogger

In recent months it has started to support the Opera CSS3. A very encouraging progress that can inspire a new spirit to re-work. Well ...., so far gubhugreyot totally did not post the tutorial design or associated with CSS3 animation, which delays post about CSS3 is great because not all browsers fully support. Now that Opera also has full support (IE only stay that do not support CSS3), then there is no more obstacles and barriers to create tutorials or design involving the use of CSS3 animation. To start a post about CSS3 animation, we will create a rainbow effect on the hover text link only using pieces of css code. of course in this case is a CSS3 animation.

Live Demo

Adding Hover Link Color To Blogger

• Go to Blogger
• Template > Edit Html 
• Search for  ]]></b:skin> (Ctrl+f)
• Add the following code above it 

@keyframes BHhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-o-keyframes BHhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-ms-keyframes BHhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-moz-keyframes BHhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-webkit-keyframes BHhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
a:hover{ /* original code by : bloggers-hero.blogspot.com 30 Juni 2012 */
 animation:BHhoverpelangi 4s infinite; /* Standart */
 -o-animation:BHhoverpelangi 4s infinite; /* Opera */
 -ms-animation:BHhoverpelangi 4s infinite; /* IE */
 -moz-animation:BHhoverpelangi 4s infinite; /* Firefox */
 -webkit-animation:BHhoverpelangi 4s infinite; /* Safari and Chrome */
}

• Click Save

CONSIDERATION USES CSS3 ANIMATION TO THE RAINBOW EFFECT ON THE HOVER TEXT LINK:

• All browsers have support for CSS3 animation. 
• those of you who are still using older browsers, please immediately download the latest browsers already support CSS3 animation. You can open the download link via the menu on the left of the blog page.
• Using CSS3 animation code be made more efficient and concise, so loading the blog becomes not much affected.
• Using CSS3 code easier blogger to create a variety of colors in the rainbow effect caused.
• Using CSS3 animation code easier for bloggers to develop a variety of new effects (additional effect).

• Now If  You Enjoy This Post! Please Take 5 Seconds To Share It.