CSSを使ってアニメーションを追加するには

Question

私は現在、IT教師からの課題に取り組んでいます。ここでは、4ウェイの信号を送信するはずです。車は赤色の光で停止するはずです。私は交通信号の個々のライトを点滅させようとしています。

これにはキーフレームアニメーションは機能しません。本当にイライラします。私はこれにコードを追加しようとしています

：

<circle cx="112" cy="82" r="13" stroke="black" stroke-width="1" 
fill="green" id="g"/> 
<circle cx="112" cy="52" r="13" stroke="black" stroke-width="1" 
fill="yellow" id="b"/> 
<circle cx="112" cy="22" r="13" stroke="black" stroke-width="1" fill="red" 
id="r"/> 

@keyframes red { 
    from {background-color: red;} 
    to {background-color: black;} 
#r{ 
position: absolute; 
animation-name: red; 
animation-duration: 2s; 
animation-iteration-count: infinite; 

私はこれに非常に新しいようであれば、私は私が、と率直に言って、私たちの先生は、彼ができない彼の仕事で本当に悪いです、申し訳ありません私たちに物事を説明しません。

Answer 1

fillプロパティをアニメーション化する background-colorをアニメーションから、あなたのキーフレームアニメーションを変更

：それは奇妙に思えるが、であります

@keyframes red { 
 
    from {fill: red;} 
 
    to {fill: black;} 
 
} 
 
#r{ 
 
position: absolute; 
 
animation-name: red; 
 
animation-duration: 2s; 
 
animation-iteration-count: infinite; 
 
}

<svg> 
 
<circle cx="112" cy="82" r="13" stroke="black" stroke-width="1" 
 
fill="green" id="g"/> 
 
<circle cx="112" cy="52" r="13" stroke="black" stroke-width="1" 
 
fill="yellow" id="b"/> 
 
<circle cx="112" cy="22" r="13" stroke="black" stroke-width="1" fill="red" 
 
id="r"/> 
 
</svg>

：

@keyframes red { 
    from {fill: red;} 
    to {fill: black;} 
} 

はここで働い例ですSVG fillが、background-colorの代わりに使用されますe背景色。