CSS @keyframe не работает

Я проходил примеры, и у меня пропало что-то здесь. Я не могу запустить эту простую анимацию css, изменив цвет текста. Когда я запускаю приведенный ниже пример, текст остается черным.CSS @keyframe не работает

У меня есть анимация с именем «changeColor», применяемая к классу «текст» для элемента h1. Он будет исчезать от одного цвета к другому с интервалом в 5 секунд.

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      .text{ 
       display:block; 
       -webkit-animation: changeColor 5s infinite; /* Safari 4+ */ 
       -moz-animation: changeColor 5s infinite; /* Fx 5+ */ 
       -o-animation: changeColor 5s infinite; /* Opera 12+ */ 
       animation: changeColor 5s infinite; /* IE 10+ */ 

      } 
      @keyframes changeColor { 
       0% { 
       color: 'red'; 
       } 

       100% { 
       color: 'blue'; 
       } 
      } 
      @-moz-keyframes changeColor { 
       0% { 
       color: 'red'; 
       } 

       100% { 
       color: 'blue'; 
       } 
      } 
      @-webkit-keyframes changeColor { 
       0% { 
       color: 'red'; 
       } 

       100% { 
       color: 'blue'; 
       } 
      } 
     </style> 
    </head> 
    <body> 
     <h1 class="text">Not Working</h1> 
    </body> 
</html>

источник

2013-07-25 user2275231

Что случилось? Пробовали ли вы какие-либо решения? – mtt

дорогой вы подаете CSS не JS просто удалить '' в вашем CSS он будет работать как шарм

ссылка добавить http://jsfiddle.net/6Hq8v/

.text{ 
        display:block; 
        -webkit-animation: changeColor 5s infinite; /* Safari 4+ */ 
        -moz-animation: changeColor 5s infinite; /* Fx 5+ */ 
        -o-animation: changeColor 5s infinite; /* Opera 12+ */ 
        animation: changeColor 5s infinite; /* IE 10+ */ 

       } 
       @keyframes changeColor { 
        0% { 
        color: red; 
        } 

        100% { 
        color: blue; 
        } 
       } 
       @-moz-keyframes changeColor { 
        0% { 
        color: red; 
        } 

        100% { 
        color: blue; 
        } 
       } 
       @-webkit-keyframes changeColor { 
        0% { 
        color: red; 
        } 

        100% { 
        color: blue; 
        } 
       }

источник

2013-07-25 08:01:43 Hushme

Yup! Я в основном в js, поэтому не заметил этого. Спасибо за свежую пару глаз! – user2275231

Проверить это Demonstration

You не нужно новое правило changeColor. Этого достаточно:

@-webkit-keyframes NAME-YOUR-ANIMATION { 
    0% { color: red; } 
    100% { color: blue; } 
}

Больше Animation Информация here:

источник

2013-07-25 08:08:36 mtt

CSS @keyframe не работает

ответ

Смежные вопросы