knocking text

<style>
.knocking {

animation: bounce 2s infinite;
animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1) width:auto;
;
}

.letterone {

animation-delay: 0s;
display: inline-block;
}

.lettertwo {

animation-delay: 0.1s;
display: inline-block;
}

.letterthree {

animation-delay: 0.15s;
display: inline-block;
}

.letterfour {

animation-delay: 0.2s;
display: inline-block;
}

@keyframes bounce {
0% {
transform: scale(1, 1) translateY(0);
}

10% {
transform: scale(1.1, .9) translateY(0);

}

30% {
transform: scale(.9, 1.1) translateY(-30px);
transform: rotate(-10deg);
}

50% {
transform: scale(1.05, .95) translateY(0);
transform: rotate(10deg);
}

60% {
transform: scale(1, 1) translateY(-4px);
transform: rotate(-10deg);
}

100% {
transform: scale(1, 1) translateY(0);
}
}
</style>

<p class="knocking letterone">t</p><p class="knocking lettertwo">e</p><p class="knocking letterthree">x</p><p class="knocking letterfour">t</p>