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。

如何在两个彩色动画之间无限制地交替使用？

1 个答案: