Move Over Type Animation

Below you’ll find a goofy type animation I discovered:

Here is the HTML:

  
	

        

			O
			h
			,
			 
			H
			e
			y
			 
			T
			h
			e
			r
			e
		
      
	

And here is the SCSS:

	
		@keyframes bounceLetter {
		  
		  0% {
		    opacity: 0;
		    transform: translateY(-60%);
		  }
		  75% {
		    transform: translate(-150%, 0);
		  }
		  100% {
		    opacity: 1;
		    transform: none;
		  }
		}
		@mixin bounceLetter ($timing) {
		  @include prefix-animation(bounceLetter $timing cubic-bezier(0.21,-0.01, 0.38, 1.2) forwards);
		}
		.introduction {
			text-align: center;
			font-size: 90px;
			font-family: sans-serif;
			$letters: 30;

			@for $i from 1 through $letters {
			    $time: #{$i*.1}s;
			    .letter-#{$i} { 
			    	position: relative;
			    	display: inline-block;
			    	background-color: transparent;
			       @include bounceLetter($time);	
			    }
			}
		}