Slow transition

I have written a JS program in which the background color of an element changes every 2 seconds. The value of the background color is a linear-gradient function.

I have written some other functions too to make things easier.

I want the transition to take place slowly but I cannot find a way to do that.
The color changes instantly. I want it to ease-in in like 2 seconds.

How can I do that?

Below is the link:
https://codepen.io/anon/pen/qzOLqW

I guess you will have to use a for loop to iterate along each pixel and fill the pixel with the desired colour. And then set a time frame interval for each iteration.

I believe you are looking for CSS transitions.

Hope it helps.