@keyframes does not work

Question

have a function jQuery which adds to a div the class below:

.brancoTransparente {
  animation: cor;
  opacity: .9;
  transition: all .3s;
}
.brancoTransparente a {
  color: #000;
}
@keyframes cor{
  0% {
    background-color: transparente;
  }
  100% {
    background-color: #fff;
  }
}

the color of the link is changing of good, which leads to believe that the jQuery is entering the class. But the background color is not changing.

What I did wrong?

Obs.: doing as below works. However, the new background appears abruptly and I would like it to appear as an effect fadein:

.brancoTransparente {
    opacity: .9;
    background: #fff;
}
.brancoTransparente a {
    color: #000;
    height: 80px;
    line-height: 80px;
}

It’s a race on scrool of the browser below 5px color change

Answer 1

So that the class keep the animation properties just add the property animation-fill-mode and choose the necessary value.

Values
None
The animation will not apply any style to the target when it is not running; instead, it will be displayed using its state based on all other CSS rules applied to it.
forwards
The destination will retain the computed values defined by the last key frame found during execution.
Backwards
The animation will apply the values defined in the first relevant key table as soon as it is applied to the destination and will retain this during the animation-delay period.
Both
The animation will follow the rules back and forth, extending the properties of the animation in both directions.

I recommend you to use animation-fill-mode: both, so the class will keep the properties defined in the animation.

.brancoTransparente {
  opacity: .9;
  transition: all .3s;
  animation: cor;
  background-color: blue;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.brancoTransparente a {
  color: #000;
}
@keyframes cor{
  0% {
    background-color: transparente;
  }
  100% {
    background-color: red;
    display: block;
    padding: 10px;
  }
}

<ul>
  <li class="brancoTransparente">
    <a>Teste</a>
  </li>
</ul>

Answer 2

It actually works, only it goes back to its initial state, not in the state of animation.

Place an Animation Duration of some time and note that the animation will work:

.brancoTransparente {
  opacity: .9;
  transition: all .3s;
  animation: cor;
  background-color: blue;
  animation-duration: 1s;
}
.brancoTransparente a {
  color: #000;
}
@keyframes cor{
  0% {
    background-color: transparente;
  }
  100% {
    background-color: red;
    display: block;
    padding: 10px;
  }
}

<ul>
  <li class="brancoTransparente">
    <a>Teste</a>
  </li>
</ul>

Note: The Animation-Duration Property defines how long time an Animation should take to complete. If the Animation-Duration Property is not specified, no Animation will occur, because the default value is 0s (0 Conds).

---

Note: The property Animation-Duration defines how long a animation should take time to complete. If the Animation-Duration does not is specified, no animation will occur, because the default value is 0s (0 seconds). https://www.w3schools.com/css/css3_animations.asp