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

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例如在行动中。