我的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動畫代碼是不工作

回答

相關問題