Code:
.header-logo {
filter: hue-rotate(180deg);
}
.header-logo{
-webkit-animation: cracked-rainbow 3.5s infinite;
-moz-animation: cracked-rainbow 3.5s infinite;
-o-animation: cracked-rainbow 3.5s infinite;
-ms-animation: cracked-rainbow 3.5s infinite;
animation: cracked-rainbow 3.5s infinite;
}
@-webkit-keyframes cracked-rainbow {
0%{filter: hue-rotate(180deg);}
10%{filter: hue-rotate(18deg);}
20%{filter: hue-rotate(36deg);}
30%{filter: hue-rotate(54deg);}
40%{filter: hue-rotate(72deg);}
50%{filter: hue-rotate(90deg);}
60%{filter: hue-rotate(108deg);}
70%{filter: hue-rotate(126deg);}
80%{filter: hue-rotate(144deg);}
90%{filter: hue-rotate(162deg);}
100%{filter: hue-rotate(180deg);}
}
@-moz-keyframes cracked-rainbow {
0%{filter: hue-rotate(180deg);}
10%{filter: hue-rotate(18deg);}
20%{filter: hue-rotate(36deg);}
30%{filter: hue-rotate(54deg);}
40%{filter: hue-rotate(72deg);}
50%{filter: hue-rotate(90deg);}
60%{filter: hue-rotate(108deg);}
70%{filter: hue-rotate(126deg);}
80%{filter: hue-rotate(144deg);}
90%{filter: hue-rotate(162deg);}
100%{filter: hue-rotate(180deg);}
}
@-ms-keyframes cracked-rainbow {
0%{filter: hue-rotate(180deg);}
10%{filter: hue-rotate(18deg);}
20%{filter: hue-rotate(36deg);}
30%{filter: hue-rotate(54deg);}
40%{filter: hue-rotate(72deg);}
50%{filter: hue-rotate(90deg);}
60%{filter: hue-rotate(108deg);}
70%{filter: hue-rotate(126deg);}
80%{filter: hue-rotate(144deg);}
90%{filter: hue-rotate(162deg);}
100%{filter: hue-rotate(180deg);}
}
@-o-keyframes cracked-rainbow {
0%{filter: hue-rotate(180deg);}
10%{filter: hue-rotate(18deg);}
20%{filter: hue-rotate(36deg);}
30%{filter: hue-rotate(54deg);}
40%{filter: hue-rotate(72deg);}
50%{filter: hue-rotate(90deg);}
60%{filter: hue-rotate(108deg);}
70%{filter: hue-rotate(126deg);}
80%{filter: hue-rotate(144deg);}
90%{filter: hue-rotate(162deg);}
100%{filter: hue-rotate(180deg);}
}
@keyframes cracked-rainbow {
0%{filter: hue-rotate(180deg);}
10%{filter: hue-rotate(18deg);}
20%{filter: hue-rotate(36deg);}
30%{filter: hue-rotate(54deg);}
40%{filter: hue-rotate(72deg);}
50%{filter: hue-rotate(90deg);}
60%{filter: hue-rotate(108deg);}
70%{filter: hue-rotate(126deg);}
80%{filter: hue-rotate(144deg);}
90%{filter: hue-rotate(162deg);}
100%{filter: hue-rotate(180deg);}
}
uhm well the code block made the css hella ugly but it still works lmao
the hue-rotate property can go up to 360deg, thats up to you if you want to change it
the only reason i went to 180 is because it was easier for me