html - 图像动画有效，但文本动画无效

Question

我的图像动画效果很好，但文本动画根本不起作用。这段代码哪里出错了？

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

JsFiddle

Answer 1

首先 - 正如 RussAwesome 提到的 - 您使用的是 ID 选择器而不是类选择器。

其次 - 尝试将文本颜色设置为与黑色不同的值。例如:红色

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

这是你的 updated fiddle

我减少了动画时间以更好地展示效果。