27801 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai une barre sticky qui se bloque au scrool en haut de page, tout va bien !
J'y ai rajouté une petite animation:
.tnav{
    position:sticky;
    top:0px;   
    box-shadow: #0c2b1e33 0 4px 14px;    
    background: #ffff00;   
}
.tnav.bleu{    
    transition-property: background-color;
    opacity : 0.8;
    transition-duration: 1s;      
    animation: bar 2s ;
  }
  @keyframes bar{
    from{
        background: #ffff00;
        }
    to{
        background: #390ab9;
    }
}


la couleur passe du jaune au bleu, mais au bout de 2s revient l'initiale. Comment garder la couleur tant la barre est en haut de page ?
Merci d'avance