<div id="text">
  <div class="I">I</div>
  <div class="P">PLAY</div>
  <div class="W">WITH</div>
  <div class="C">CODE</div>
</div>

body {
  height:100vh;
  display: flex;
  justify-content:center;
  align-items: center;
  background-color: #263463;
  font-size: 40px;
  overflow: hidden;
}

#text {
  position: relative;
  left:-100px;
  color: #fff;
  text-shadow: 2px 2px 4px #000000;  
}

.I {
  position: absolute;
  top: 0;
  left: -100px;
  animation: hinge 2s ease;
  animation-fill-mode: forwards;  
}
  
.P {
  position: absolute;
  top: 0;
  left: -50px;
  animation: hinge 2s ease;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.W {
  position: absolute;
  top: 0;
  left: 80px;
  animation: hinge 4s ease;
  animation-fill-mode: forwards;
}

.C {
  position: absolute;
  top: 0px;
  left: 220px; 
  animation: hinge 3s ease;
  animation-fill-mode: forwards;
}

@keyframes hinge {
  0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }  
  20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }  
  40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 
  80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 
  100% { transform: translateY(500px); opacity: 0; }
}