Maintain last color change in CSS Keyframe

So I made a CSS animation with keyframe where the background color of the element and the font color changes. The problem is, when it comes to the last frame, the colors get reset to the default ones. I used the animation-fill-mode and it helps to maintain the end size but the colors still reset? This is the code:

@keyframes anim{
  0% {background-color: #404880; color: #DCE0F7;}
  90% {background-color: #747AA6; color: #242D5E;}
  100% {font-size: 19px;}
}
.apply{
  font-size: 15px;
  background-color: #404880;
  border-radius: 5px;
  border-style: none;
  color: #DCE0F7;
}
.apply:hover{
  animation: anim;
  animation-duration: .5s;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation-fill-mode:forwards; /*IE 10+*/
  animation-fill-mode:forwards; /*when the spec is finished*/
}

Answers


When you set animation-fill-mode: forwards, the state as at the last keyframe would be retained for the element even after the animation is complete. Here, you've not set value for either background-color or color in last keyframe (which is, the 100% frame) and so it goes back to the original value that was provided for the element (the default or un-hovered state). If you want it to retain the state as at 90% frame then the properties and its values should be carried over to the 100% frame also (even though there is no change).

For exactly the same reason that is mentioned above, you don't require the 0% frame in your settings because it has the same value as the default state of the element. The 0% frame is generally required only when the state at the start of the animation needs to be different from the default state.

@keyframes anim {
  90% {
    background-color: #747AA6;
    color: #242D5E;
  }
  100% {
    font-size: 19px;
    background-color: #747AA6;
    color: #242D5E;    
  }
}
.apply {
  font-size: 15px;
  background-color: #404880;
  border-radius: 5px;
  border-style: none;
  color: #DCE0F7;
}
.apply:hover {
  animation: anim;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='apply'>Test content</div>

Need Your Help

splitting up a gruntfile

node.js gruntjs

I have this task in my gruntfile:

Submit form in new window from one button (out of many) in IE8

javascript jquery html forms internet-explorer-8

I have a form that has a "preview" submit input, which submits the same form as the others, but with a "visualize" parameter which has to open a new window (in order to keep the form in its temporary