<div class="start">Click to Start</div>
<div class="game is-hidden">
  <div class="ghosts">
    <div class="ghost clyde">
      <div class="eyes">
        <div class="eye left"><div class="pupil left"></div></div>
        <div class="eye right"><div class="pupil right"></div></div>
      </div>
      <div class="rip rip1"></div>
       <div class="rip rip2"></div>
       <div class="rip rip3"></div>
       <div class="rip rip4"></div>
    </div>

    <div class="ghost blinky">
      <div class="eyes">
        <div class="eye left"><div class="pupil left"></div></div>
        <div class="eye right"><div class="pupil right"></div></div>
      </div>
      <div class="rip rip1"></div>
       <div class="rip rip2"></div>
       <div class="rip rip3"></div>
       <div class="rip rip4"></div>
    </div>

    <div class="ghost pinky">
      <div class="eyes">
        <div class="eye left"><div class="pupil left"></div></div>
        <div class="eye right"><div class="pupil right"></div></div>
      </div>
      <div class="rip rip1"></div>
       <div class="rip rip2"></div>
       <div class="rip rip3"></div>
       <div class="rip rip4"></div>
    </div>

    <div class="ghost inky">
      <div class="eyes">
        <div class="eye left"><div class="pupil left"></div></div>
        <div class="eye right"><div class="pupil right"></div></div>
      </div>
      <div class="rip rip1"></div>
       <div class="rip rip2"></div>
       <div class="rip rip3"></div>
       <div class="rip rip4"></div>
    </div>
  </div>
  <div class="surprise"></div>
  <div class="lightning"></div>
  <audio id="scream" src="http://soundbible.com/mp3/Female_Scream_Horror-NeoPhyTe-138499973.mp3"></audio>
</div>
body {
  background-color: black;
  position: relative;
  color: white;
}

.start {
  color: white;
  background-color: purple;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.is-hidden {
  display: none;
}

.ghost {
  position: absolute;
  background-color: white;
  border-top-left-radius: 45%;
  border-top-right-radius: 45%;
  width: 100px;
  height: 100px;
}

.eyes {
  text-align: center;
}
.eye {
  display: inline-block;
  margin-top: 30px;
  text-align: left;
  border-radius: 100%;
  background-color: white;
  width: 20px;
  height: 25px;
  position: relative;
}

.pupil {
  border-radius: 100%;
  background-color: blue;
  width: 10px;
  height: 10px;
  position: relative;
  top: 50%;
  left: 45%;
  
  &.right {
    top: 45%;
    left: 50%;
  }
}

.rip {
 position: absolute;
  bottom: -25px;
  display:inline-block;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 17px solid transparent;
  border-top: 25px solid rgba(250,250,250,1);
}

.rip1 {
  animation: rip1 .5s linear infinite forwards;
}

.rip2 {
  left: 20px;
  border-left: 15px solid transparent;
  border-right: 20px solid transparent;
  animation: rip2 .5s linear infinite forwards;
}

.rip3 {
  left: 50px;
  border-left: 15px solid transparent;
  border-right: 20px solid transparent;
  animation: rip3 .5s linear infinite forwards;
}

.rip4 {
   left: 85px;
  border-left: 15px solid transparent;
  border-right: 0px solid transparent;
  animation: rip4 .5s linear infinite forwards;
}

.clyde {
  background-color: orange;
  right: 100%;
  animation: clyde 10s ease-in-out forwards;
  
  .rip {
    border-color: orange transparent transparent;
  }
}

.blinky {
  background-color: red;
  right: 90%;
  animation: blinky 10s ease-in-out forwards;
  
  .rip {
    border-color: red transparent transparent;
  }
}

.pinky {
  background-color: pink;
  right: 80%;
  animation: pinky 10s ease-in-out forwards;
  
  .rip {
    border-color: pink transparent transparent;
  }
}

.inky {
  background-color: aqua;
  right: 70%;
  animation: inky 10s ease-in-out forwards;
  
  .rip {
    border-color: aqua transparent transparent;
  }
}

.surprise {
  opacity: 0;
  background-size: cover;
   background: url("https://1.bp.blogspot.com/-ox7usFmILrI/T-1rcU1QM4I/AAAAAAAAJpI/IV24l9qR8iM/s1600/the+walking+dead+-+season+2+-+mud+zombie.jpg") no-repeat fixed center;
   height: 100vh;
   width: 100vw;
  animation: surprise 20s steps(2) infinite;
  z-index: -2;
  position: relative;
}

.lightning {
  opacity: 0;
  background-size: cover;
   background: url("https://1.bp.blogspot.com/-ox7usFmILrI/T-1rcU1QM4I/AAAAAAAAJpI/IV24l9qR8iM/s1600/the+walking+dead+-+season+2+-+mud+zombie.jpg") no-repeat fixed center;
   height: 100vh;
   width: 100vw;
  animation: surprise 20s steps(2) infinite, flash ease-out 10s 2s infinite;
  filter: brightness(3);
  z-index: -1;
  position: relative;
}


@keyframes clyde {
  100% {
    right: 0;
  }
}

@keyframes blinky {
  100% {
    right: -140px;
  }
}

@keyframes pinky {
  100% {
    right: -280px;
  }
}

@keyframes inky {
  100% {
    right: -420px;
  }
}

@keyframes rip1 {
  100% {
    border-left-width: 5px;
  }
}

@keyframes rip2 {
  100% {
    border-left-width: 10px;
  }
}

@keyframes rip3 {
  100% {
    border-left-width: 20px;
  }
}

@keyframes rip4 {
  100% {
    border-top-width: 30px;
  }
}
@keyframes surprise {
  100% {
    opacity: 1;
  }
}

@keyframes flash {
		from { opacity: 0; } 
    52% { opacity: 0; }
	53% { opacity: 0.6; }
    54% { opacity: 0.2; }
    56% { opacity: 1; } 
	to { opacity: 0; }
}
View Compiled
$(document).ready(function() {
  var button = document.querySelector('.start');
  button.addEventListener("click", scareThem);
  
  function scareThem(e) {
    addClass(e.currentTarget, 'is-hidden');
    var game = document.querySelector(".game");
    var scream = document.getElementById("scream");
    
    scream.volume = 0.0;
    scream.play();
    
    removeClass(game, "is-hidden");
  
    window.setTimeout(function() {
      playScream(scream);
    }, 10000);

    function playScream(scream) {
      scream.volume = 1.0;
      scream.play();
    }
    
    function hasClass(el, className) {
      if (el.classList)
        return el.classList.contains(className)
      else
        return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
    }

    function addClass(el, className) {
      if (el.classList)
        el.classList.add(className)
      else if (!hasClass(el, className)) el.className += " " + className
    }

    function removeClass(el, className) {
      if (el.classList)
        el.classList.remove(className)
      else if (hasClass(el, className)) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
        el.className=el.className.replace(reg, ' ')
      }
    }
  }
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js