Question

我有这个HTML标记：

<div id="alert">Warning!!</div>

我想给它一个动画效果，在红黑色的无限循环中改变它的字体颜色。

我尝试使用Webkit颜色过渡循环来获得带有font-color的背景颜色：

#alert {font-color: #39f !important;}
@-webkit-keyframes colours {
      0% {font-color: #000;}
     50% {font-color: #990000;}
     100% {font-color: #FF0000;}

}
#alert {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
}

但它没有用。

参考：http://snipplr.com/view/33728/
我的代码：http://jsfiddle.net/LDRR7/9/

Answer 1

您希望使用颜色，因为font-color属性不存在。

另请注意，您使用的教程适用于webkit浏览器，但不适用于Firefox！所以我在。

中添加了firefox前缀

请参阅http://jsfiddle.net/LDRR7/21/

    #alert {color: #39f !important;}
@-webkit-keyframes colours {
     0% {color: #39f;}
 25% {color: #8bc5d1;}
 50% {color: #f8cb4a;}
 75% {color: #8bc5d1;}
100% {color: #39f;}

}
@-moz-keyframes colours {
      0% {color: #39f;}
 25% {color: #8bc5d1;}
 50% {color: #f8cb4a;}
 75% {color: #8bc5d1;}
100% {color: #39f;}

}

#alert {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
    -moz-animation-direction: normal;
    -moz-animation-duration: 10s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: colours;
    -moz-animation-timing-function: ease;
}

Answer 2

使用color，而不是font-color。

此外，您的动画错误，它不会淡化回原始颜色，请尝试：

#alert {color: #39f !important;}
@-webkit-keyframes colours {
      0% {color: #39f;}
     25% {color: #8bc5d1;}
     50% {color: #f8cb4a;}
     75% {color: #8bc5d1;}
    100% {color: #39f;}

}
#alert {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
}

示例：http://jsfiddle.net/pitaj/LDRR7/13/

Answer 3

css无法识别“font-color”。尝试使用“颜色”，并将持续时间更改为1s以获得“华丽”效果。

Answer 4

使用Css很容易改变颜色。拨打课程并使用动画， -webkit-animation 属性。这两个属性一起调用一种函数你以秒为单位传递时间（示例：animation: colorchange 50s; -webkit-animation: colorchange 50s;

）。然后你改变了函数内部的颜色，在我们的例子中它被称为“colorchange”。使用函数的方法是使用@keyframes colorchange或@-webkit-keyframes colorchange。这样简单。另外需要注意的是浏览器对于像chrome safari这样的浏览器，请使用@ -webkit-keyframes colorchange并指定颜色.U可以使用Magic。一个明显的例子是如下：

#Class .inner {
        -moz-transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        -webkit-transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        -ms-transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        transition: height 0.2s ease-in-out, width 0.2s ease-in-out;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        display: -ms-flexbox;
        -ms-flex-align: center;
        -ms-flex-pack: center;
        background: #e74c3c;                                  /*circle circle*/
        border-radius: 100%;
        width: 35em;
        height: 35em;
        padding: 4em;
        text-align: center;
        box-shadow: 0 0 0 1em #FFF;
        cursor: default;

        animation: **colorchange** **50s**;
        -webkit-animation: **colorchange** **50s**;
    }

@keyframes colorchange
{
0%   {background: #e74c3c;}
15%  {background: violet;}
30%  {background:indigo;}
45%  {background: blue;}
60% {background: green;}
75% {background: orange;}
90% {background: purple;}
100% {background: #e74c3c;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
    0%   {background: #e74c3c;}
    15%  {background: violet;}
    30%  {background:indigo;}
    45%  {background: blue;}
    60% {background: green;}
    75% {background: orange;}
    90% {background: purple;}
    100% {background: #e74c3c;}
}

希望它易于理解（' - '）;

Answer 5

#alert {color: #FF35CE !important; font-weight:700 ;animation:changecolor 5s;
-moz-animation:changecolor 5s; /* Firefox */
-webkit-animation:changecolor 5s; /* Safari and Chrome */
-o-animation:changecolor 5s; /* Opera */
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}

@keyframes changecolor
{
0%   {color:red;}
25%  {color:yellow;}
50%  {color:blue;}
75% {color:green;}
100%   {color:red;}
}

@-moz-keyframes changecolor /* Firefox */
{
0%   {color:red;}
25%  {color:yellow;}
50%  {background:blue;}
75% {color:green;}
100%   {color:red;}
}

@-webkit-keyframes changecolor /* Safari and Chrome */
{
0%   {color:red;}
25%  {color:yellow;}
50%  {color:blue;}
75% {color:green;}
100%   {color:red;}
}

@-o-keyframes changecolor /* Opera */
{
0%   {color:red;}
25%  {color:yellow;}
50%  {color:blue;}
75% {color:green;}
100%   {color:red;}
}

字体颜色在无限循环中发生变化

5 个答案: