index.css

.play {
  animation: shake 0.7s;
  animation-iteration-count: infinite;
}

.paused { 
  animation-iteration-count: 0;
  animation: shake 0;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

#quake-overlay-zzz {
  /* position: fixed; */

  margin: 20%;
  position: absolute;
  display: none;
  text-align: center;
  font-size: 20px;
  padding: 20px;
 
  background-color: #fff;
  z-index: 10000;
}

/* #overlay1 {
  margin: auto;
  position: absolute;
  top: 50px; left: 50px;
  bottom: 50px; right: 50px;
  background-color: #000;
  color: #FFF;
  z-index:5;
  } */