Each comma separated element is a value that will transition between 2 points. This transition happens on a change of the div, this can be on a hover, but also when applying another div (Through JS).

To created the effect of the lines gradually shifting in color I used another element that slides on top of the original two lines. The new lines originally have 0 width, but on hover they gain 100% width. With a transition transition: width 1000ms; this happens gradually.

Try not to use my code as your final example, as it is somewhat ugly. But I hope it gets the point across.