1

I'm trying to do some animation with CSS. However, I can't seem to get hue-rotate to actually... well, animate. If I directly specify a filter in #docs-branding-logo, that gets applied, but when its in an animation, nothing happens

I'm currently on Firefox. I've tried this on Chrome and Edge as well, same result

@keyframes rainbowlogo {
0% {filter: hue-rotate(0deg)!important}  
10% {filter: hue-rotate(36deg)!important}
20% {filter: hue-rotate(72deg)!important}
30% {filter: hue-rotate(108deg)!important}
40% {filter: hue-rotate(144deg)!important}
50% {filter: hue-rotate(180deg)!important}
60% {filter: hue-rotate(216deg)!important}
70% {filter: hue-rotate(252deg)!important}
80% {filter: hue-rotate(288deg)!important}
90% {filter: hue-rotate(384deg)!important}
100% {filter: hue-rotate(360deg)!important}}

#docs-branding-logo {
animation-name:rainbowlogo!important;
animation-duration:3s!important;
animation-iteration-count:infinite!important;}
Psychon Night
  • 53
  • 1
  • 8
  • 1
    Just a suggestion (not related to your problem) - you can condense your keyframes down to a single line: `to { filter: hue-rotate(360deg); }` – chazsolo Nov 04 '22 at 17:14

1 Answers1

1

Remove the !important will solve the problem

@keyframes rainbowlogo {
0% {filter: hue-rotate(0deg)}  
10% {filter: hue-rotate(36deg)}
20% {filter: hue-rotate(72deg)}
30% {filter: hue-rotate(180deg)}
40% {filter: hue-rotate(144deg)}
50% {filter: hue-rotate(180deg)}
60% {filter: hue-rotate(216deg)}
70% {filter: hue-rotate(252deg)}
80% {filter: hue-rotate(288deg)}
90% {filter: hue-rotate(384deg)}
100% {filter: hue-rotate(360deg)}}

#docs-branding-logo {
animation-name:rainbowlogo;
animation-duration:3s;
animation-iteration-count:infinite;
width:100px;
height:100px;
background-color:red;
}
<div id='docs-branding-logo'> </div>
James
  • 2,732
  • 2
  • 5
  • 28