<ul class="text-animation hidden">
  <li>M</li>
  <li>A</li>
  <li>M</li>
  <li>U</li>
  <li>R</li>
  <li>J</li>
  <li>O</li>
  <li>R</li>
</ul>
<p>&laquo; Pradipta Roy &raquo;</p>

*{margin: 0; padding: 0;}
body {background: rgb(17,104,105);}
.text-animation {
  list-style: none; position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -100%);
}
.text-animation li {
  display: inline-block;
  margin-right: 5px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em; color: #70e1e2;
  opacity: 1;
  transition: all 3.5s ease;
}
.text-animation li:last-child {
  margin-right: 0;
}
.text-animation.hidden {
  opacity: 0;
}
.text-animation.hidden li:nth-child(1) {transform: translate(-200px, -200px);}
.text-animation.hidden li:nth-child(2) {transform: translate(20px, 100px);}
.text-animation.hidden li:nth-child(3) {transform: translate(-180px, -80px);}
.text-animation.hidden li:nth-child(4) {transform: translate(10px, -200px);}
.text-animation.hidden li:nth-child(5) {transform: translate(-300px, 200px);}
.text-animation.hidden li:nth-child(6) {transform: translate(20px, -20px);}
.text-animation.hidden li:nth-child(7) {transform: translate(30px, 200px);}
.text-animation.hidden li:nth-child(8) {transform: translate(-200px, -200px);}
p{
  text-shadow: 0px 3px 0px #b2a98f,
                 0px 14px 10px rgba(0,0,0,0.15),
                 0px 24px 2px rgba(0,0,0,0.1),
                 0px 34px 30px rgba(0,0,0,0.1);
  display: none; position: absolute;
  font-family: cursive;
  font-size: 2rem;
  left: 50%; top: 50%;
  transform: translate(-50%, 10%);
}

$(function(){
  setTimeout(function(){
    $('.text-animation').removeClass('hidden');
    $('p').delay(4000).slideDown('slow');
  }, 500);
})