HTML

<p><span class=”text-animate”>Super Cool</span></p>

CSS

.text-animate {
text-transform: uppercase;
background-image: linear-gradient(-225deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 2s linear infinite;
display: inline-block;
}

@keyframes textclip {
to {
background-position: 200% center;
}
}

HTML

<div class=”waviy”>
<span style=”–i: 1;”>Y</span>
<span style=”–i: 2;”>O</span>
<span style=”–i: 3;”>U</span>
<span style=”–i: 4;”>R </span>
<span style=”–i: 5;”>G</span>
<span style=”–i: 6;”>A</span>
<span style=”–i: 7;”>M</span>
<span style=”–i: 8;”>E </span>
<span style=”–i: 9;”>H</span>
<span style=”–i: 10;”>E</span>
<span style=”–i: 11;”>R</span>
<span style=”–i: 12;”>E</span>
</div>

CSS

@keyframes textclip {
to {
background-position: 200% center;
}
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

.waviy {
position: relative;
-webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
font-size: 60px;
}
.waviy span {
position: relative;
display: inline-block;
color: #fff;
text-transform: uppercase;
animation: waviy 1s infinite;
animation-delay: calc(.1s * var(–i));

}
@keyframes waviy {
0%,40%,100% {
transform: translateY(0)
}
20% {
transform: translateY(-20px)
}
}

HTML

CSS

.title-word {
animation: color-animation 4s linear infinite;
}

.title-word-1 {
–color-1: #DF8453;
–color-2: #3D8DAE;
–color-3: #E4A9A8;
}

.title-word-2 {
–color-1: #DBAD4A;
–color-2: #ACCFCB;
–color-3: #17494D;
}

.title-word-3 {
–color-1: #ACCFCB;
–color-2: #E4A9A8;
–color-3: #ACCFCB;
}

.title-word-4 {
–color-1: #3D8DAE;
–color-2: #DF8453;
–color-3: #E4A9A8;
}

@keyframes color-animation {
0% {color: var(–color-1)}
32% {color: var(–color-1)}
33% {color: var(–color-2)}
65% {color: var(–color-2)}
66% {color: var(–color-3)}
99% {color: var(–color-3)}
100% {color: var(–color-1)}
}

Email iMajin to get started today!