JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
    <span>Y</span>
    <span>o</span>
    <span>u</span>
    <span>'</span>
    <span>r</span>
    <span>e</span>
</h1>
<h1>
    <span>W</span>
    <span>e</span>
    <span>l</span>
    <span>c</span>
    <span>o</span>
    <span>m</span>
    <span>e</span>
</h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Indie+Flower);

@-webkit-keyframes colors {
    0%, 100% { color: #f00; transform: translate(0, -10px); }
    16.667% { color: #ff0; }
    33.333% { color: #0f0; }
    50%     { color: #0ff; transform: translate(0, 10px); }
    66.667% { color: #00f; }
    83.333% { color: #f0f; }
}

html {
    padding: 72px 0 0;
}

h1 {
    font-size: 0;
    text-align: center;
}

h1 span {
    font: normal 72px/1.5 'Indie Flower';
}

span {
    display: inline-block;
    -webkit-animation: colors 2s ease-in-out infinite;
}

span:nth-child(5n) { -webkit-animation-delay: 0; }
span:nth-child(5n + 1) { -webkit-animation-delay: -.4s; }
span:nth-child(5n + 2) { -webkit-animation-delay: -.8s; }
span:nth-child(5n + 3) { -webkit-animation-delay: -1.2s; }
span:nth-child(5n + 4) { -webkit-animation-delay: -1.6s; }