如何无限地在两种颜色动画之间切换？

Question

我是一个CSS3动画的新手，但我看到处处都是，我找不到解决这个问题的方法。我有一个JSP页面，我希望背景从绿色慢慢淡化为蓝色，然后以相反的方式慢慢淡出，并无限重复此过程。

我现在已经从绿色变成了蓝色，但是之后它立刻变回蓝色。有没有办法播放两个动画，从绿色到蓝色，然后是蓝色到绿色，然后无限重复？

这里的CSS代码我现在有：

@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; 
} 

这是一个有点乱，因为我只是想一切得到它的工作。对于那个很抱歉！

Answer 1

，而不是两个关键帧动画，你想要一个两次改变背景颜色（一次为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例如在行动。