set innerHTML to attribute(title) include a small CSS animation

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="lib/script.js"></script>
  </head>

  <body>
    <h1 id="hd">Hello Plunker!</h1>
  </body>
</html>

/* Add your styles here */

body {
  overflow: hidden;
}

h1#hd:before {
  content: '' attr(title) '';
  position: absolute;
  color: green;
  opacity: 0.6;
  transform: translateY(10px);
}

h1 {
  transform: perspective(100px);
  transform-origin: center;
  perspective: 100px;
  perspective-origin: center;
  transition: 0.6s;
}

h1:hover {
  transform: translate3d(0, 0, 6px);
  animation-name: shake;
  animation-duration: 0.6s;
}

@keyframes shake {
  0%,
  70%,
  100% {
    transform: translateX(0);
  }
  50%,
  90% {
    transform: translateX(12px);
  }
}

// Add your code here

window.onload = function() {
  var hi = document.getElementById('hd').innerHTML;
  document.getElementById('hd').setAttribute('title', hi);
};