Keyframe animieren Grenze-Bodenfarbe

Question

Ich habe über andere Fragen/Antworten gelesen, die Keyframes (sowie Artikel online) adressieren und es scheint mir wirklich, dass mein Code funktionieren sollte ... aber nichts passiert. Ich benutze keine Hersteller-Präfixe, weil es aus Caniuse scheint, dass sie nicht mehr notwendig sind. `

@keyframe colorWash { 
    from{border-bottom:25px solid #111;} 
    50%{border-bottom: 25px solid #333;} 
    to{border-bottom:25px solid #777;} 
} 

#bro { 
    padding:2rem; 
    background-color:#999; 
    border-bottom: 25px solid #111; 
    animation: colorWash 10s infinite; 
} 

Answer 1

Bis auf eine Kleinigkeit (die in CSS, Angelegenheiten) Ihre Animation funktioniert:

• es ist nicht @keyframe, aber @keyframes

Nun, da Sie es angegeben sollte unendlich schleifen, ich nehme an, Sie wollen es glatt. Deshalb wollen Sie wahrscheinlich from mit to (so den Übergang zwischen Ende anzupassen und zu starten ist nahtlos. Ich habe auch die Dauer verkürzt, so ist es einfacher, zu beobachten.

Es ist auch ratsam, nur die Eigenschaft angeben, die in @keyframes animiert werden . In Ihrem Fall border-bottom-color.

@keyframes colorWash { 
 
    from {border-bottom-color: #111;} 
 
    42%{border-bottom-color: #777;} 
 
    to {border-bottom-color: #111;} 
 
} 
 

 
#bro { 
 
    padding:2rem; 
 
    background-color:#999; 
 
    border-bottom: 25px solid; 
 
    animation: colorWash 3s infinite; 
 
    }

<div id="bro"></div>