Artem V Artem V - 2 months ago 5
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:



@-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=" alt=" AV ">
<h1 class="anim ">But this text must be animated with hue animation!</h1>


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 {
   -webkit-animation: hue 2s infinite linear;

Here's your updated fiddle

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