css bubble text

<style>
.bubbler {
font-size:2em;
font-family:arial;
}
.bubbler mark {
animation: bubble 2s infinite;
animation-timing-function: ease-in-out;
background: none;
color:black;
}

.bubbler mark:nth-child(1) { animation-delay:0s; display:inline-block;}
.bubbler mark:nth-child(2) { animation-delay:0.8s; display:inline-block;}
.bubbler mark:nth-child(3) { animation-delay:1.6s; display:inline-block; }
.bubbler mark:nth-child(4) { animation-delay:2.4s; display:inline-block;}
.bubbler mark:nth-child(5) { animation-delay:3.2s; display:inline-block;}
.bubbler mark:nth-child(6) { animation-delay:4s; display:inline-block;}
.bubbler mark:nth-child(7) { animation-delay:4.8s; display:inline-block;}
.bubbler mark:nth-child(8) { animation-delay:5.6s; display:inline-block;}
.bubbler mark:nth-child(9) { animation-delay:6.4s; display:inline-block;}
.bubbler mark:nth-child(10) { animation-delay:7.2s; display:inline-block;}
.bubbler mark:nth-child(11) { animation-delay:8s; display:inline-block;}
.bubbler mark:nth-child(12) { animation-delay:8.8s; display:inline-block;}
.bubbler mark:nth-child(13) { animation-delay:9.6s; display:inline-block;}
.bubbler mark:nth-child(14) { animation-delay:10.4s; display:inline-block;}
.bubbler mark:nth-child(15) { animation-delay:11.2s; display:inline-block;}

@keyframes bubble {
from {
color:black;
}

50% {
color:hotpink;
}

to {
color:black;
}
}

@-webkit-keyframes prin {
from {
color:black;
}

50% {
color:hotpink;
}

to {
color:black;
}
}
</style>

<div class="bubbler"><mark>l</mark><mark>a</mark><mark>y</mark><mark>e</mark><mark>r</mark><mark>c</mark><mark>a</mark><mark>k</mark><mark>e</mark></div>