Wie man die Farbe eines <label> in HTML dynamisch mit der Zeit ändert

Question

Wie kann ich den Code schreiben, um die Farbe eines Elements in HTML dynamisch zu ändern. Zum Beispiel: Wenn Hallo das Etikett von dem ersten 2 Sekunden war sollte es um die Farbe zu gelb und dann mit einem Übergang und so weiter auf grün effect.Thank Sie

Answer 1

Wie wäre es mit CSS3 Animationen. Ich nahm das Konzept von W3Schools. Probieren Sie es aus

Sie können mehr Hintergrundfarben hinzufügen, indem Sie die Prozentsätze teilen.

label { 
 

 
    background-color: red; 
 

 
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */ 
 
    -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */ 
 
    animation-name: example; 
 
    animation-duration: 1s; 
 
    animation-delay: 1s; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
/* Safari 4.0 - 8.0 */ 
 
@-webkit-keyframes example { 
 
    0% {background-color:red; } 
 
    25% {background-color:yellow; } 
 
    50% {background-color:blue; } 
 
    75% {background-color:green; } 
 
    100% {background-color:red; } 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes example { 
 
    0% {background-color:red; ;} 
 
    25% {background-color:yellow; } 
 
    50% {background-color:blue;} 
 
    75% {background-color:green; } 
 
    100% {background-color:red; } 
 
}

<label>Mylabel</label>

Answer 2

animation das tun könnten:

label { 
 
    animation:colorchg 2s infinite; 
 
    color:green 
 
} 
 
@keyframes colorchg { 
 
    50% { 
 
    color:red; 
 
    } 
 
}

<label>color</label>

Answer 3

würde ich tun dies in CSS empfehlen, aber wenn Sie eine JS-Lösung möchten, verwenden Sie setInterval() das Intervall zu definieren und eine Klasse auszuwählen, die Farbe oder nur element.style.color oder was auch immer ändern gibt, und verwenden Sie CSS-Übergang, um die Farbänderung zu übergehen.

var interval = setInterval(function() { 
 
    label.classList.toggle('color'); 
 
},2000)

label { 
 
    transition: 2s; 
 
    color: green; 
 
} 
 
.color { 
 
    color: red; 
 
}

<label id="label">text</label>