2つのカラーアニメーションを無限に切り替えるにはどうすればよいですか？

Question

私はCSS3アニメーションの初心者ですが、どこからでも見てきましたが、この問題の解決策を見つけることはできません。私は背景がゆっくりと緑色から青色に消えてゆくことを望むJSPページを持っていて、ゆっくりと反対の方法でフェードしてこのプロセスを無限に繰り返す。

私は現在、緑色から青色にスムーズに移行していますが、その後すぐに青色に戻ります。緑から青、そして青から緑の2つのアニメーションを再生し、無限に繰り返す方法はありますか？それは私がちょうど働くそれを得るためにすべてをしようとしていたので、少し厄介です

@keyframes changeColorGreenToBlue { 
    from { background-color: rgb(146,213,142);} 
    to {background-color: rgb(133,184,222);} 
} 
@keyframes changeColorBlueToGreen { 
    from {background-color: rgb(133,184,222);} 
    to { background-color: rgb(146,213,142);} 
} 
.jumbotron { 
    height: 100%; 
    width: 100%; 
    background-color: green; 
    animation: changeColorGreenToBlue ease; 
    animation-iteration-count: infinite; 
    animation-duration: 4s; 
    animation-fill-mode: both; 
    animation-name: changeColorBlueToGreen; 
    animation-iteration-count: infinite; 
    animation-duration: 4s; 
    background-size: cover; 
    background-repeat: repeat-y; 
    margin-bottom:1px; 
} 

：

は、ここで私が今持っているCSSコードです。それについて申し訳ありません！

Answer 1

ではなく2つのキーフレームアニメーション、あなたはこのように、二回（一回50％で、バック100％で）背景色を変更するものを欲しい：

@keyframes changeColor { 
    0% { 
    background-color: rgb(146,213,142); 
    } 

    50% { 
    background-color: rgb(133,184,222); 
    } 

    100% { 
    background-color: rgb(146,213,142); 
    } 
} 

は、アクション、例えばmy codepenを参照してください。