CSS couleur d'arrière-plan des images clés d'animation

Je suis en train d'animer un simple fade in/out pour une couleur d'arrière-plan de la barre d'outils de firefox (themeing). Problème est, ma couleur s'estompe complètement transparent. Je préfère ma couleur de fondu de moitié puis commencer avant de revenir à la couleur.

J'ai énuméré le code que j'ai essayé...

toolbar{
    animation-name: animation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    
    animation-play-state: running;
}

@keyframes animation {
    50.0%  {background-color:red;}
}

J'ai essayé de bidouiller avec des paramètres d'opacité avec pas de chance. Toute aide est appréciée.

  • Veuillez expliquer ce que vous voulez atteindre avec plus de détails...
  • Je voudrais une couleur d'arrière-plan à la décoloration du rouge vif au rouge puis sur le dos, sans la couleur de la décoloration à la transparence.
InformationsquelleAutor user1774640 | 2014-06-23
  1. 14
    @-webkit-keyframes animation {
    0%     {background-color:red;}
    50.0%  {background-color:#ff6666;} /* your chosen 'mid' color */
    100.0%  {background-color:red;}
}

@keyframes animation {
    0%     {background-color:red;}
    50.0%  {background-color:#ff6666;}
    100.0%  {background-color:red;}
}

    JSfiddle Démo

    • Merci! Cela fonctionne comme souhaité.
    InformationsquelleAutor Paulie_D