Css动画没有保持在最新位置[重复]

Question

嗨，我已经学习 css 2 个月了，所以我遇到了动画问题。 我希望我的代码在石灰完成，但动画完成，并且 div 再次变为红色。

    @keyframes example{
        from{background-color: red}
        to{background-color: lime}
    }


    .animate{
        width:200px;
        height:100px;
        background-color: red;
        animation-name: example;
        animation-direction: alternate;
        animation-duration: 4s;
        animation-iteration-count: 1;
    }

Answer 1

您应该对您的代码执行此操作。

    @keyframes example{
        from{background-color: red}
        to{background-color: lime}
    }


    .animate{
        width:200px;
        height:100px;
        background-color: red;
        animation-name: example;
        animation-direction: alternate;
        animation-duration: 4s;
        animation-iteration-count: 1;
        animation-fill-mode:forwards;
    }

Answer 2

将背景颜色从红色更改为石灰。

@keyframes example{
  from{background-color: red}
  to{background-color: lime}
}

.animate{
  width:200px;
  height:100px;
  background-color: lime;
  animation-name: example;
  animation-direction: alternate;
  animation-duration: 4s;
  animation-iteration-count: 1;
}

<div class="animate"></div>