individual letter bouncing (css only)

<!—- you’ll most likely have to play around with the positioning —>

<head>
<style>

body {
font-size: 16px;
}

@font-face {
font-family: sweet;
src: url(https://dl.dropbox.com/s/enaxxtimb6c419h/SweetChiliDemo.ttf);
}

.name {
top: -1em;
z-index: 99;
-webkit-text-stroke: 2px black;
text-transform: uppercase;
color: white;
font-family: sweet;
font-size: 6em;
padding: 0.625em;
opacity: 80%;
animation: bounce 2s infinite;
animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1);
}

.first {
right: 0.625em;
}

.second {
right: 0.125em;
animation-delay: 0.3s;
}

.third {
right: -0.75em;
animation-delay: 0.5s;
}

.fourth {
right: -0.875em;
animation-delay: 0.65s;
}

@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>
</head>

<body>

<span class="first name">r</span>
<span class="second name">a</span>
<span class="third name">e</span>
<span class="fourth name">!</span>

</body>