2

私はこのHTMLタグを持っています:

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

そして、赤と黒の無限ループでフォントの色を変えるアニメーション効果を与えたいと思います。

font-color で背景色に Webkit Color Transition Loop を使用してみました:

#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/

4

5 に答える 5

5

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;
}
于 2012-11-29T16:16:10.083 に答える
3

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/

于 2012-11-29T16:20:16.243 に答える
0

"font-color" は CSS で認識されません。代わりに「色」を試し、期間を 1 秒程度に変更して「派手な」効果を得ます。

于 2012-11-29T16:21:11.627 に答える