HTML
<div class="words words-1">
<span>D</span>
<span>O</span>
</div>
<div class="words words-1">
<span>A</span>
<span>M</span>
<span>A</span>
<span>Z</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
<div class="words words-1">
<span>T</span>
<span>H</span>
<span>I</span>
<span>N</span>
<span>G</span>
<span>S</span>
</div>
SCSS
@import 'https://fonts.googleapis.com/css?family=Rubik+Mono+One';
html, body {
height: 100%;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #f1c40f;
overflow: hidden;
font-family: 'Rubik Mono One', sans-serif;
}
.words {
color: #f1c40f;
font-size: 0;
line-height: 1;
span {
font-size: 120px;
display: inline-block;
animation: move 2s ease-in-out infinite;
&:nth-child(2) { animation-delay: 0.5s; }
&:nth-child(3) { animation-delay: 1.0s; }
&:nth-child(4) { animation-delay: 1.5s; }
}
}
@keyframes move {
0% { transform: translate(-33%, 0);}
50% { text-shadow: 0 15px 40px rgba(black, 0.6); }
100% { transform: translate(33%, 0); }
}
2 Responses