CODEWITHSUNDEEP
htmlcsscss-animations
link
link

Reputation: 2419

Image animation works, but text animation doesn't

My image animation works fine, but text animation doesn't work at all. Where I am going wrong with this code?

@-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.sstatic.net/LwSTv.png?s=328&g=1">
<hr>
<h1 class="anim">But this text must be animated with hue animation!</h1>

JsFiddle

Upvotes: 2

Views: 176

Answers (2)

wick3d
wick3d

Reputation: 672

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.

Upvotes: 2

RussAwesome
RussAwesome

Reputation: 464

You have set the HTML to have class="anim" but you have declared the CSS with an id instead: #anim {...} Change this to .anim or change your HTML to be id="anim"

Upvotes: 2

Related Questions