我的CSS动画代码是不工作

请帮我明白的地方，我这个代码会错，因为我的形象的动画工作正常，但文字动画没有在所有工作：我的CSS动画代码是不工作

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

来源

2016-08-24 sudo

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

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

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

这是你的updated fiddle

我已经减少了动画时间，以便更好地显示效果。

来源

2016-08-24 12:52:59 wick3d

您已设置的HTML有class="anim"，但你已经声明了一个id，而不是CSS：#anim {...}更改为.anim或更改HTML是id="anim"

来源

2016-08-24 12:32:54 RussAwesome

非常感谢！在你回答之前的所有时间，我在想＃是班级和。是id。：D但实际上＃是id和。是班级。 – sudo

等等...我用** id =“anim”**替换了** class =“anim”**但它仍然不起作用:(https://jsfiddle.net/bwp1n56v/6/ – sudo

它实际上正在工作。但你的h1的黑色不受色调的影响... – yeouuu

我的CSS动画代码是不工作

回答

相关问题