Jumping text

by Craig Haywood

HTML

<h1>
  <span>Enter&nbsp; </span>
  <span>first&nbsp; </span>
  <span>name&nbsp; </span>
  <span>for&nbsp; </span><br/>
  <span>custom&nbsp; </span>
  <span>experience&nbsp; </span>
  <br/> 
        <input id="fname" placeholder="enter first name" class="input" type="text" autofocus><br/>
  <input style="width: 150px;" class="input" type="submit">
        
</div>
</h1>

CSS

@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');

html, body {
  width: 100%;  
  height: 100%;
  background: #FF0066;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Titan One', cursive;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #eee;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ccc;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #ccc;
}
input{
  font-family: 'Titan One', cursive;
border-radius: 999px;
  font-size: 30px;
  margin-top: 30px;
  text-align: center;
  border-style: solid;
  border-width: 2.5px;
  border-color: black;
}
h1 {
  height: 200px;
  text-align: center;
}

h1 span {
  position: relative;
  top: 10px;
  display: inline-block;
  animation: bounce .3s ease infinite alternate;
  font-family: 'Titan One', cursive;
  font-size: 60px;
  color: #FFF;
  text-shadow: 0 1px 0 #333,
               0 2px 0 #333,
               0 3px 0 #333,
               0 4px 0 #333,
               0 5px 0 #333,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, 1);
}

h1 span:nth-child(2) { animation-delay: .1s; }
h1 span:nth-child(3) { animation-delay: .2s; }
h1 span:nth-child(4) { animation-delay: .3s; }
h1 span:nth-child(5) { animation-delay: .4s; }
h1 span:nth-child(6) { animation-delay: .5s; }
h1 span:nth-child(7) { animation-delay: .6s; }
h1 span:nth-child(8) { animation-delay: .7s; }

@keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #111,
                 0 2px 0 #111,
                 0 3px 0 #111,
                 0 4px 0 #111,
                 0 5px 0 #111,
                 0 6px 0 #111,
                 0 7px 0 #111,
                 0 8px 0 #111,
                 0 9px 0 #111,
                 0 50px 25px...

JavaScript

window.onload = function() {
  var input = document.getElementById("fname").focus();
}