Have an animation for the landing page

For now, using something like this:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
    <title>servo home</title>

    <script>
      window.addEventListener("click", e => {
        var div = document.querySelector("div");
        var x = e.clientX;
        var y = e.clientY;
        div.style.left = x + "px";
        div.style.top = y + "px";
      });
    </script>

    <style>
      div {
        position: absolute;
        width: 10px;
        height: 10px;
        background: red;
        top: 100px;
        left: 100px;
      }
    </style>

    <style>
      body {
        font-family: 'Fira Sans', sans-serif;
        background: white;
      }
      p {
        text-align: center;
        margin-top: 100px;
        font-size: 60px;
      }

      span {
        display: inline-block;
        animation: bump 1050ms ease-in infinite;
      }

      p > span:nth-child(1) {
        animation-delay: 0ms;
      }
      p > span:nth-child(2) {
        animation-delay: 150ms;
      }
      p > span:nth-child(3) {
        animation-delay: 230ms;
      }

      p > span:nth-child(4) {
        animation-delay: 310ms;
      }

      p > span:nth-child(5) {
        animation-delay: 390ms;
      }

      @keyframes bump {
        0% {
          transform: translate(0, 0);
        }
        30% {
          transform: translate(0, 0);
        }
        45% {
          transform: translate(0, -40px);
        }
        100% {
          transform: translate(0, 0);
        }
      }
    </style>
  </head>
  <body>
    <div></div>
    <p><span>S</span><span>e</span><span>r</span><span>v</span><span>o</span></p>
  </body>
</html>
paulrouget / servofocus

Have an animation for the landing page #20
