Comments:

Create styles that change background-color and/or text color. While using same colors in times 00:00 and 24:00 we ensure that the color transition is looping correctly.

Initialize Plugin:

var stimed = new $.stimed({
  timeTarget: '.time',
  speedUp: 1000
});

Example:

stimed.style.create(
// Create time text and background color styles at the same time
{
  target: '.time',
  property: 'color',
  time: 0,
  value: '#000'
},{
  target: '.time',
  property: 'background-color',
  time: 0,
  value: '#ff4eb3'
},
{
  target: '.time',
  property: 'color',
  time: '18:00',
  value: '#fff'
},{
  target: '.time',
  property: 'background-color',
  time: '18:00',
  value: '#2185d0'
},
{
  target: '.time',
  property: 'color',
  time: '24:00',
  value: '#000'
},
{
  target: '.time',
  property: 'background-color',
  time: '24:00',
  value: '#ff4eb3'
});

// Create main background color style
stimed.style.create({
  target: 'main',
  property: 'background-color',
  time: 0,
  value: '#fff'
},
{
  target: 'main',
  property: 'background-color',
  time: '18:00',
  value: '#000'
},
{
  target: 'main',
  property: 'background-color',
  time: '24:00',
  value: '#fff'
});