如何在两个彩色动画之间无限切换？

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

请参阅我的codepen,例如在行动中.