私のCSSアニメーションのコードが

Question

に動作していない私のイメージアニメーションが正常に動作しますので、私はこのコードで間違っつもりだところ、私が理解するのに役立ちますが、テキストアニメーションは全く機能しないでください。

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> 
 

 

 

 

Answer 1

最初になるように、あなたのHTMLを変更#anim {...} - RussAwesomeが述べたように - あなたはIDセレクタを使用していますクラスセレクターの代わりに。

第2 - テキストの色を黒以外の値に設定してみてください。たとえば ：

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

レッドはここで、より良い効果を示すためにあなたのupdated fiddle

私は減少してきたアニメーション時間です。

Answer 2

あなたはclass="anim"を持つようにHTMLを設定しているが、あなたの代わりにIDとCSSを宣言している：.animに変更したりid="anim"