Переливающийся текст на CSS

Хочу поделиться с вами простым кодом с эффектами на CSS, который придаст вашему логотипу интересный эффект перелива при наведении на него курсора. Одно условие  - логотип должен быть набран шрифтом. Впрочем это может быть не логотип, а какой-то заголовок.

На чём же строится эффект? Всё очень просто - обычный hover-эффект и CSS свойство transition, которое управляет длительностью перехода от одного цвета к другому. Т.е. от цвета default к цвету hover.

Образец

HTML

<div class="logo-main">
<span >i</span>
<span>N</span>
<span>i</span>
<span>k</span>
<span>S</span>
<span>i</span>
<span>t</span>
<span>e</span>
</div>

CSS

 .logo-main span {
    color: #fff;
    cursor: default;
    transition: color 1.2s;
    font-size: 7rem;
    font-weight:900;
 }
.logo-main span:hover{transition:color .002s}
.logo-main span:nth-child(1):hover, .logo-main span:nth-child(8):hover, .logo-main span:nth-child(15):hover{color:#d42735}
.logo-main span:nth-child(2):hover, .logo-main span:nth-child(9):hover, .logo-main span:nth-child(16):hover{color:#4b3039}
.logo-main span:nth-child(3):hover, .logo-main span:nth-child(10):hover{color:#6d4f9d}
.logo-main span:nth-child(4):hover, .logo-main span:nth-child(11):hover{color:#fcb248}
.logo-main span:nth-child(5):hover, .logo-main span:nth-child(12):hover{color:#fb776c}
.logo-main span:nth-child(6):hover, .logo-main span:nth-child(13):hover{color:#f58435}
.logo-main span:nth-child(7):hover, .logo-main span:nth-child(14):hover{color:#4f1d22}