* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.animated-box {
  font-family: "Lato";
  color: transparent;
  width: 1920px;
  height: 1080px;
  text-align: center;
  border-radius: 4px;
}

.animated-box h1 {
  font-weight: 300px;
  font-size: 200px;
  text-transform: uppercase;
}

.animated-box p {
  font-weight: 200;
}

/* The animation starts here */
.animated-box {
  position: relative;
}

.animated-box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0px;
  background: linear-gradient(120deg, black, #646464, black);
  background-size: 300% 300%;
  clip-path: polygon(
    0% 100%,
    25px 100%,
    25px 25px,
    calc(100% - 25px) 25px,
    calc(100% - 25px) calc(100% - 25px),
    25px calc(100% - 25px),
    25px 100%,
    100% 100%,
    100% 0%,
    0% 0%
  );
}

.animated-box.in:after {
  animation: frame-enter 0.1s forwards ease-in-out reverse,
    gradient-animation 8s ease-in-out infinite;
}

/* motion */
@keyframes gradient-animation {
  0% {
    background-position: 15% 0%;
  }
  50% {
    background-position: 85% 100%;
  }
  100% {
    background-position: 15% 0%;
  }
}

@keyframes frame-enter {
  0% {
    clip-path: polygon(
      0% 100%,
      25px 100%,
      25px 25px,
      calc(100% - 25px) 25px,
      calc(100% - 25px) calc(100% - 25px),
      25px calc(100% - 25px),
      25px 100%,
      100% 100%,
      100% 0%,
      0% 0%
    );
  }
  25% {
    clip-path: polygon(
      0% 100%,
      25px 100%,
      25px 25px,
      calc(100% - 25px) 25px,
      calc(100% - 25px) calc(100% - 25px),
      calc(100% - 25px) calc(100% - 25px),
      calc(100% - 25px) 100%,
      100% 100%,
      100% 0%,
      0% 0%
    );
  }
  50% {
    clip-path: polygon(
      0% 100%,
      25px 100%,
      25px 25px,
      calc(100% - 25px) 25px,
      calc(100% - 25px) 25px,
      calc(100% - 25px) 25px,
      calc(100% - 25px) 25px,
      calc(100% - 25px) 25px,
      100% 0%,
      0% 0%
    );
  }
  75% {
    -webkit-clip-path: polygon(
      0% 100%,
      25px 100%,
      25px 25px,
      25px 25px,
      25px 25px,
      25px 25px,
      25px 25px,
      25px 25px,
      25px 0%,
      0% 0%
    );
  }
  100% {
    -webkit-clip-path: polygon(
      0% 100%,
      25px 100%,
      25px 100%,
      25px 100%,
      25px 100%,
      25px 100%,
      25px 100%,
      25px 100%,
      25px 100%,
      0% 100%
    );
  }
}