So I have this problem where i only want to animate the drop shadow to change the drop shadow and not the whole img.
img {
filter: drop-shadow(0 0 10px rgb(255, 0, 0));
animation: animate 3s linear infinite;
}
@keyframes animate
{
0%
{
filter: hue-rotate(0deg);
}
100%
{
filter: hue-rotate(360deg);
}
}<img src="https://o.remove.bg/downloads/9d28d100-7cfa-4b00-b958-c6be005e62c4/87de3a763609657f3950e8e0829291f4-removebg-preview.png">You could try animating changes of color of the drop shadow itself.
img {
filter: drop-shadow(0 0 10px rgb(255, 0, 0));
animation: animate 3s linear infinite;
}
@keyframes animate
{
0%
{
filter: drop-shadow(0 0 10px rgb(255, 0, 0));
}
25%
{
filter: drop-shadow(0 0 10px rgb(0, 255, 0));
}
50% {
filter: drop-shadow(0 0 10px rgb(0, 0, 255));
}
100%
{
filter: drop-shadow(0 0 10px rgb(255, 0, 0));
}
}<img src="https://o.remove.bg/downloads/9d28d100-7cfa-4b00-b958-c6be005e62c4/87de3a763609657f3950e8e0829291f4-removebg-preview.png">However, this does mean explicitly giving which colors you want it to transition to instead of just being able to rotate the color 360 degrees. (Using HSL instead of RGB doesn't solve this problem.)