Artem V Artem V - 3 months ago 9
CSS Question

My css animation code is not working

Please help me to understand where I am going wrong with this code because my image animation works fine, but text animation don't works at all:

JsFiddle: https://jsfiddle.net/bwp1n56v/5/

HTML:



@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
@keyframes round {
100% {
border-radius: 0px;
width: 256px;
height: 256px;
opacity: 100%;
}
0% {
border-radius: 25px;
width: 0px;
height: 0px;
opacity: 0%;
}
}
img {
animation: round 3s ease-in-out;
}
#anim {
-webkit-animation: hue 60s infinite linear;
}

<h1>As you see this animation works fine:</h1>
<img src="https://i.stack.imgur.com/LwSTv.png?s=328&g=1 alt=" AV ">
<hr>
<h1 class="anim ">But this text must be animated with hue animation!</h1>







Answer

First - as RussAwesome mentioned - you are using an ID selector instead of class selector.

Second - try setting the text color to a different value than black. For example: Red

.anim {
   color:red;
   -webkit-animation: hue 2s infinite linear;
 }

Here's your updated fiddle

I've reduced the animation time to better show the effect.

Comments