CSS animation to add a rainbow effect on hover
doqmeat.com
rainbow on hover
1 .rainbow:hover {
2 letter-spacing: 0px;
3 filter: none;
4 animation-name: rainbow;
5 animation-duration: 1.8s;
6 animation-iteration-count: infinite;
7 animation-timing-function: ease-in-out;
8 }
9
10 @keyframes rainbow {
11 0% {
12 color: #d593ff;
13 }
14
15 20% {
16 color: #00c3fe;
17 }
18
19 40% {
20 color: #8ef77b;
21 }
22
23 60% {
24 color: #f9d56a;
25 }
26
27 80% {
28 color: #fea17f;
29 }
30
31 100% {
32 color: #ff76b1;
33 }
34 }