<h1><span style="font-size: 80px; text-shadow: 1px 3px #fff;">408</span><br>Request Time-Out.</h1>
<div class="container">
  <div class="pendulum left" height="200" width="200">
  </div>
  <div class="pendulum" height="200" width="200">
  </div>
  <div class="pendulum" height="200" width="200">
  </div>
  <div class="pendulum" height="200" width="200">
  </div>
  <div class="pendulum right" height="200" width="200">
  </div>
</div>

<h2>Your browser did not send a complete request in time.</h2>

body {
  background-color: #aaa;
}
h1, h2 {
  display: block;
  font-family: serif;
  text-align: center;
  margin: 10px auto;
}
.container {
  margin: 0px calc(50% - 280px);
  margin-bottom: 30px;
  display: flex;
  width: 300px;
  border: 1px solid white;
  padding: 100px 100px 50px 160px;
}
.pendulum {
  display: block;
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50px;
  box-shadow: 0px 0px 7px purple;
}
.left {
  position: relative;
  top: -50px;
  left: -100px;
  animation: moveLeft 2s infinite ease-in-out;
}

.right {
  position: relative;
  top: 0px;
  left: 0px;
  animation: moveRight 2s infinite ease-in-out;
  animation-delay: .2s;
}

@keyframes moveLeft {
  20%   {transform: translate(100px, 50px);}
  50%   {
    animation-timing-function: ease-in-out;
    transform: translate(100px, 50px);
  }
  75% {transform: translate(100px, 50px);}
}
@keyframes moveRight {
  20%   {
    animation-timing-function: ease-in-out;
    transform: translate(100px, -50px);
  }
  50%   {transform: translate(0px, 0px);}
  75%   {transform: translate(0px, 0px);}
}