credit hikiko pro-standard bouncy text

<style> @font-face { font-family:'cupcake'; src: url(https://dl.dropbox.com/s/dayh8onbivwmqq7/Cherry%20Cupcake%20Personal%20Use.ttf); } #text01 { font-family:'cupcake'; 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>

<div class="#text01"></div>