CSS3 Rainbow Link

by Taufik Nurrohman

HTML

<a class="rainbow" href="#">CSS3 Rainbow Link</a>

CSS

body {
  background-color:black;
  font:bold 50px Arial,Sans-Serif;
  padding:100px 0px;
  text-align:center;
}

a.rainbow {
  color:white;
  text-decoration:none;
  -webkit-animation:rainbow 2s linear infinite alternate;
  -moz-animation:rainbow 2s linear infinite alternate;
  -ms-animation:rainbow 2s linear infinite alternate;
  -o-animation:rainbow 2s linear infinite alternate;
  animation:rainbow 2s linear infinite alternate;
}

@-webkit-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    } 
    100% {color:indigo;     }
}
@-moz-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
@-ms-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
@-o-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
@keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30% ...