cyberpink bouncy text

<!--- change the fonts and colors etc also this is postionated as you can see it so delete that part if you don't want it :p ---

<style>
@font-face {
font-family:funkhouse;
src: url(https://dl.dropbox.com/s/2bxao21r582gf5d/FUNKHOUS.ttf);
}

#yop, .letter {
position: absolute; } /* this is for the position */

#yop {
padding: 0.25em;
background: transparent;
z-index: 99;
font-family:funkhouse;
color: #ffd2ea;
-webkit-text-stroke: 0.5px #FFA4D6;
-webkit-filter: drop-shadow(0px 0px 1.5px #FF95CD);
left:9em;
bottom:7.875em;
opacity: 98%;
}

.letter {
font-size: 5.75em;
padding: 0.25em;
animation: float 1s linear infinite;
}

.first {
left: 0.16em;
}

.second {
left: 0.75em;
animation-delay: 0.25s;
}

.third {
left: 1em;
animation-delay: 0.15s;
}

.fourth {
left: 1.6em;
animation-delay: 0.5s;
}

@keyframes float { 0% {
transform: rotate(0) translateY(0); }
50% { transform: rotate(15deg) translateY(-10px); }
75% { transform: rotate(-15deg) translateY(0); }
100% { transform: rotate(0) translateY(0);
}
}

</style>
<body>
<div id="yop">
<span class="first letter">K</span><span class="second letter">i</span><span class="third letter">a</span><span class="fourth letter">!</span>
</div>