<div class="logo is-animetion">
<span>M</span>
<span>S</span>
<span>E</span>
<span>E</span>
<span>K</span>
</div>
.logo.is-animetion {
margin-top: 0.6em;
}
.logo.is-animetion span {
display: inline-block;
animation: wave-text 1s ease-in-out infinite;
}
.logo.is-animetion {
span:nth-of-type(1){ animation-delay: 0.0s; }
span:nth-of-type(2){ animation-delay: 0.1s; }
span:nth-of-type(3){ animation-delay: 0.2s; }
span:nth-of-type(4){ animation-delay: 0.3s; }
span:nth-of-type(5){ animation-delay: 0.4s; }
}
@keyframes wave-text{
00%{
transform: translateY(0em);
}
60%{
transform: translateY(-0.6em);
}
100%{
transform: translateY(0em);
}
}
// Demo
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
font-size: 2em;
font-family: 'Courgette', cursive;
}
View Compiled
This Pen doesn't use any external JavaScript resources.