bouncing text

<style>
.bouncing {


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

.letterone { animation-delay:0.1s; display:inline-block;}
.lettertwo { animation-delay:0.2s; display:inline-block;}
.letterthree { animation-delay:0.4s; display:inline-block; }
.letterfour { animation-delay:0.6s; 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); } 50% { transform: scale(1.05,.95) translateY(0); } 60% { transform: scale(1,1) translateY(-4px); } 100% { transform: scale(1,1) translateY(0); } }</style>

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