CSS JS

RAINBOW TEXT WITH CSS AND JAVASCRIPT

COLOR SEQUENCE @keyframes rainbow {   0% { color: red }   50% { color: green }   100% { color: blue } }

CSS RAINBOW TEXT

01

ATTACH ANIMATION .rainbow {   animation-name: rainbow;   animation-duration: 3s;   animation-iteration-count: infinite; }

HTML <p class="rainbow">FOO!</p>

TARGET TEXT BLOCK let target = document.getElementById("demo");   RAINBOW COLORS let colors = ["fc0303", "45f52a", "2a7bf5"];

JS RAINBOW TEXT

02

CURRENT COLOR let now = -1; LOOP & CHANGE TEXT COLOR setInterval(function(){   now++;   if (now >= colors.length) { now = 0; }   target.style.color = "#" + colors[now]; }, 1000);