Question

请帮助我了解这段代码我的错误，因为我的图片动画效果很好，但文字动画根本不起作用：

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

HTML：

＆＃13;

@-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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您已将HTML设置为class="anim"，但您已使用ID声明了CSS：#anim {...}将此更改为.anim或将您的HTML更改为id="anim"

Answer 2

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

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

        $("#dZUpload").dropzone({
            url: "my-upload-url",
        });

这是您的updated fiddle

我缩短了动画时间以更好地展示效果。

我的CSS动画代码不起作用

2 个答案: