CSS@keyframe不工作_Css_Html_Css Transitions_Css Animations

CSS@keyframe不工作

css html

CSS@keyframe不工作,css,html,css-transitions,css-animations,Css,Html,Css Transitions,Css Animations,我已经看过了一些例子，我在这里遗漏了一些东西。我无法启动这个简单的css动画，更改某些文本的颜色。当我运行下面的示例时，文本保持黑色我有一个名为“changeColor”的动画，应用于h1元素的类“text”。它将在5秒的时间间隔内从一种颜色变为另一种颜色 <!DOCTYPE html> <html> <head> <style> .text{ display:blo

我已经看过了一些例子，我在这里遗漏了一些东西。我无法启动这个简单的css动画，更改某些文本的颜色。当我运行下面的示例时，文本保持黑色

我有一个名为“changeColor”的动画，应用于h1元素的类“text”。它将在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>


.文本{
显示：块；
-webkit动画：changeColor 5s infinite；/*Safari 4+*/
-moz动画：changeColor 5s infinite；/*Fx 5+*/
-o-animation:changeColor 5s无限；/*Opera 12+*/
动画：changeColor 5s无限；/*IE 10+*/
}
@关键帧改变颜色{
0% {
颜色：红色；
}
100% {
颜色：“蓝色”；
}
}
@-moz关键帧更改颜色{
0% {
颜色：红色；
}
100% {
颜色：“蓝色”；
}
}
@-webkit关键帧更改颜色{
0% {
颜色：红色；
}
100% {
颜色：“蓝色”；
}
}
不起作用

您正在应用CSS，而不是JS。只要删除CSS中的引号，它就会像一个符咒一样工作

检查这个

您不需要新的

changeColor

规则。这就足够了：

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

更多动画信息：

发生了什么？你有没有尝试过任何解决方案？

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