Мой 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

Для начала - как RussAwesome упоминалось - вы используете селектор идентификатора вместо селектора классов.

Во-вторых - попробуйте установить цвет текста на другое значение, кроме черного. Например: Red

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

Вот ваш updated fiddle

Я уменьшил время анимации, чтобы лучше показать эффект.

Answer 2

Вы установили HTML, чтобы иметь class="anim" но вы объявили CSS с идентификатором вместо: #anim {...} Изменить это .anim или изменить ваш HTML, чтобы быть id="anim"