小编use*_*231的帖子

CSS @keyframe无效

我一直在经历一些例子,我会在这里错过一些东西.我无法触发这个简单的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% { …

Run Code Online (Sandbox Code Playgroud)

css html5 css-transitions css-animations

use*_*231

lucky-day

1
推荐指数

1
解决办法

1万
查看次数