Css animation not keeping at the latest position

Question

Hi I've been learning css for 2 months , so i met a problem with animation . I want my code to finish at lime , but animation finishes , and div again becomes red.

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

Tiko · Accepted Answer · 2018-09-12T18:05:33.420

You should've done this to your code .

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

score 1 · Answer 2 · answered Sep 12 '18 at 18:01

Change the background-color from red to lime.

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

Css animation not keeping at the latest position

2 Answers2