@keyframes clip {
  0% {
    clip-path: circle(15% at 50% 50%);
  }
  50% {
    clip-path: circle(25% at 50% 50%);
  }
  100% {
    clip-path: circle(15% at 50% 50%);
  }
}
@keyframes lock {
  0% {
    clip-path: circle(10% at 50% 50%);
  }
  100% {
    clip-path: circle(141% at 50% 50%);
  }
}
body {
  background-image: url(pics/Screenshot_705.png);
  background-size: cover;
}
.box-outer {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.box-outer > img {
  background-size: cover;
  position: center center;
}
.clip-path {
  animation-name: lock;
  animation-duration: 1.4s;
  animation-easing-function: linear;
  animation-iteration-count: 1;
}

.animation {
  animation-name: clip;
  animation-duration: 0.7s;
  animation-easing-function: linear;
  animation-iteration-count: infinite;
}
button {
  background: #1ebca5;
  border: none;
  min-width: 350px;
  height: 50px;
  font-size: 22px;
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.4);
  padding-left: 15px;
  padding-right: 15px;
}
.jumpscare {
  width: 100%;
  height: 620px;
  background-size: cover;
}
.red {
  color: red;
}