JSFiddle - React, Tailwind, and code Playground

by David Marshall

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>



<h1 class='animate'>
ANIMATE
</h1>

CSS

h1 {
  -webkit-transition: background 5s;
  -moz-transition: background 5s;
  -ms-transition: background 5s;
  -o-transition: background 5s;
  transition: background 5s;
  font-size: 72px;
  //background: #fff;
  background: rgb(71,234,46);
    background: -moz-linear-gradient(top,  rgba(71,234,46,1) 0%, rgba(63,63,63,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(71,234,46,1)), color-stop(100%,rgba(63,63,63,1)));
    background: -webkit-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: -o-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: -ms-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

JavaScript

function intToHex(num) {
  var hexArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
  var one = Math.floor(num / 16);
  var two = num % 16;
  return hexArr[one] + hexArr[two];
}

function rgbToHex(r, g, b) {
  return intToHex(r) + intToHex(g) + intToHex(b);
}
//r1-bottom
//r2-top
var R2 = 0;
var R1 = 255;
var G2 = 0;
var G1 = 255;
var B2 = 255;
var B1 = 255;

var numberOfIntervals = 10; //or change to whatever you want.
var interval_R = Math.floor((R2 - R1) / numberOfIntervals);
var interval_G = Math.floor((G2 - G1) / numberOfIntervals);
var interval_B = Math.floor((B2 - B1) / numberOfIntervals);

var current_R = R1;
var current_G = G1;
var current_B = B1;

var rgbArr = [];

/*for (var i = 0; i <= numberOfIntervals; i++) {
  //var color = Color.FromRGB(current_R, current_G, current_B);
  //console.log(current_R+' '+current_G+' '+current_B)
  //do something with color.

  rgbArr.push([current_R, current_G, current_B]);
  //increment.
  current_R += interval_R;
  current_G += interval_G;
  current_B += interval_B;
}*/
/*console.log(JSON.stringify(rgbArr));
$('h1').animate({
		background: "-webkit-linear-gradient(#fff, #00f)",
    '-webkit-background-clip': "text",
    '-webkit-text-fill-color': "transparent"
},5000);*/
/*var seconds=0;
//setInterval(function() {
  $('h1').css({
    background: "-webkit-linear-gradient(#fff, #00f)",
    '-webkit-background-clip': "text",
    '-webkit-text-fill-color': "transparent"
  });
  seconds++;
//}, 1000);*/
/*$('.animate').each(function(index) {
  $('#'+$(this).attr('id')).animate({ color: "#FF0000" }, index*1000);
});*/