CSS Keyframes animation go back to initial state

Question

I'm calling an animation like this:

document.getElementById('banner').className = "changeColorToIndigo";

Then I've got the CSS property:

div.changeColorToIndigo {
animation-duration: 1s;
animation-name: changeColorToIndigo;
animation-fill-mode: forwards;
}

And the keyframes animation:

@keyframes changeColorToIndigo {
from {background-color: #00BBD2;}
to {background-color: #3F51B5;}
}

But the animation goes back to it's initial state after the animation has completed, why is that? I've set the fill mode to forwards and specified the to (100%) property.

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Nov 06 '15 at 10:10

score 1 · Accepted Answer · answered Nov 06 '15 at 10:20

I've put your code in a Fiddle, and it works fine for me

HTML

<div id="banner"></div>

CSS

div{
    height: 40px;
    width: 40px;
    background-color: #00BBD2;
}

div.changeColorToIndigo {
    animation-name: changeColorToIndigo;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes changeColorToIndigo {
    from {background-color: #00BBD2;}
    to {background-color: #3F51B5;}
}

jQuery

$(document).ready(function(){
    $('#banner').addClass('changeColorToIndigo');
})

I found the culprit. I had a event listener that removed the class once finished, as I wanted to have it "clean". So, if I remove the class, it'll revert to it's initial state? — Erik, Nov 06 '15 at 10:29

CSS Keyframes animation go back to initial state

1 Answers1

Linked