:root {
  --duration: 10s;
  --size: 80vw;
  --characters: 14;
  --font-size: 22px;
  --delay-character: 0.2s;
  --text-color-hover: #ff8489;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  background: url(https://img.freepik.com/vector-gratis/fondo-abstracto-blanco_23-2148806276.jpg?size=626&ext=jpg) no-repeat center;
  background-size: cover;
}

.frame {
  width: var(--size);
  height: var(--size);
  max-width: 400px;
  max-height: 400px;
  margin: 0 auto;
  border: 2px #fbfbfb solid;
  position: relative;
  box-shadow: inset 0 0 0 20px white;
  background: url(https://images.unsplash.com/photo-1488161628813-04466f872be2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80) no-repeat center;
  background-size: cover;
  transition: ease all 0.3s;
}

.frame:hover {
  box-shadow: inset 0 0 0 0 white;
  border: 2px #f9f9f9 solid;
  cursor: pointer;
}

.frame:hover .text {
  mix-blend-mode: difference;
}

.frame:hover .text span {
  color: var(--text-color-hover);
}

.frame .text {
  transform: translate(calc(calc(var(--font-size) * -1) / 2), calc(calc(var(--font-size) * -1) / 2));
  position: relative;
  height: 100%;
  transition: ease all 0.3s;
}

.frame span {
  font-size: var(--font-size);
  display: inline-block;
  text-align: center;
  width: var(--font-size);
  -webkit-animation: frameMove var(--duration) linear infinite;
  animation: frameMove var(--duration) linear infinite;
  position: absolute;
  transition: ease all 0.3s;
}

.frame span:nth-of-type(1) {
  -webkit-animation-delay: calc(var(--delay-character) * 1);
  animation-delay: calc(var(--delay-character) * 1);
}

.frame span:nth-of-type(2) {
  -webkit-animation-delay: calc(var(--delay-character) * 2);
  animation-delay: calc(var(--delay-character) * 2);
}

.frame span:nth-of-type(3) {
  -webkit-animation-delay: calc(var(--delay-character) * 3);
  animation-delay: calc(var(--delay-character) * 3);
}

.frame span:nth-of-type(4) {
  -webkit-animation-delay: calc(var(--delay-character) * 4);
  animation-delay: calc(var(--delay-character) * 4);
}

.frame span:nth-of-type(5) {
  -webkit-animation-delay: calc(var(--delay-character) * 5);
  animation-delay: calc(var(--delay-character) * 5);
}

.frame span:nth-of-type(6) {
  -webkit-animation-delay: calc(var(--delay-character) * 6);
  animation-delay: calc(var(--delay-character) * 6);
}

.frame span:nth-of-type(7) {
  -webkit-animation-delay: calc(var(--delay-character) * 7);
  animation-delay: calc(var(--delay-character) * 7);
}

.frame span:nth-of-type(8) {
  -webkit-animation-delay: calc(var(--delay-character) * 8);
  animation-delay: calc(var(--delay-character) * 8);
}

.frame span:nth-of-type(9) {
  -webkit-animation-delay: calc(var(--delay-character) * 9);
  animation-delay: calc(var(--delay-character) * 9);
}

.frame span:nth-of-type(10) {
  -webkit-animation-delay: calc(var(--delay-character) * 10);
  animation-delay: calc(var(--delay-character) * 10);
}

.frame span:nth-of-type(11) {
  -webkit-animation-delay: calc(var(--delay-character) * 11);
  animation-delay: calc(var(--delay-character) * 11);
}

.frame span:nth-of-type(12) {
  -webkit-animation-delay: calc(var(--delay-character) * 12);
  animation-delay: calc(var(--delay-character) * 12);
}

.frame span:nth-of-type(13) {
  -webkit-animation-delay: calc(var(--delay-character) * 13);
  animation-delay: calc(var(--delay-character) * 13);
}

.frame span:nth-of-type(14) {
  -webkit-animation-delay: calc(var(--delay-character) * 14);
  animation-delay: calc(var(--delay-character) * 14);
}

.frame span:nth-of-type(15) {
  -webkit-animation-delay: calc(var(--delay-character) * 15);
  animation-delay: calc(var(--delay-character) * 15);
}

.frame span:nth-of-type(16) {
  -webkit-animation-delay: calc(var(--delay-character) * 16);
  animation-delay: calc(var(--delay-character) * 16);
}

.frame span:nth-of-type(17) {
  -webkit-animation-delay: calc(var(--delay-character) * 17);
  animation-delay: calc(var(--delay-character) * 17);
}

.frame span:nth-of-type(18) {
  -webkit-animation-delay: calc(var(--delay-character) * 18);
  animation-delay: calc(var(--delay-character) * 18);
}

.frame span:nth-of-type(19) {
  -webkit-animation-delay: calc(var(--delay-character) * 19);
  animation-delay: calc(var(--delay-character) * 19);
}

.frame span:nth-of-type(20) {
  -webkit-animation-delay: calc(var(--delay-character) * 20);
  animation-delay: calc(var(--delay-character) * 20);
}

.frame span:nth-of-type(21) {
  -webkit-animation-delay: calc(var(--delay-character) * 21);
  animation-delay: calc(var(--delay-character) * 21);
}

.frame span:nth-of-type(22) {
  -webkit-animation-delay: calc(var(--delay-character) * 22);
  animation-delay: calc(var(--delay-character) * 22);
}

.frame span:nth-of-type(23) {
  -webkit-animation-delay: calc(var(--delay-character) * 23);
  animation-delay: calc(var(--delay-character) * 23);
}

.frame span:nth-of-type(24) {
  -webkit-animation-delay: calc(var(--delay-character) * 24);
  animation-delay: calc(var(--delay-character) * 24);
}

.frame span:nth-of-type(25) {
  -webkit-animation-delay: calc(var(--delay-character) * 25);
  animation-delay: calc(var(--delay-character) * 25);
}

.frame span:nth-of-type(26) {
  -webkit-animation-delay: calc(var(--delay-character) * 26);
  animation-delay: calc(var(--delay-character) * 26);
}

.frame span:nth-of-type(27) {
  -webkit-animation-delay: calc(var(--delay-character) * 27);
  animation-delay: calc(var(--delay-character) * 27);
}

.frame span:nth-of-type(28) {
  -webkit-animation-delay: calc(var(--delay-character) * 28);
  animation-delay: calc(var(--delay-character) * 28);
}

.frame span:nth-of-type(29) {
  -webkit-animation-delay: calc(var(--delay-character) * 29);
  animation-delay: calc(var(--delay-character) * 29);
}

.frame span:nth-of-type(30) {
  -webkit-animation-delay: calc(var(--delay-character) * 30);
  animation-delay: calc(var(--delay-character) * 30);
}

.frame span:nth-of-type(31) {
  -webkit-animation-delay: calc(var(--delay-character) * 31);
  animation-delay: calc(var(--delay-character) * 31);
}

.frame span:nth-of-type(32) {
  -webkit-animation-delay: calc(var(--delay-character) * 32);
  animation-delay: calc(var(--delay-character) * 32);
}

.frame span:nth-of-type(33) {
  -webkit-animation-delay: calc(var(--delay-character) * 33);
  animation-delay: calc(var(--delay-character) * 33);
}

.frame span:nth-of-type(34) {
  -webkit-animation-delay: calc(var(--delay-character) * 34);
  animation-delay: calc(var(--delay-character) * 34);
}

.frame span:nth-of-type(35) {
  -webkit-animation-delay: calc(var(--delay-character) * 35);
  animation-delay: calc(var(--delay-character) * 35);
}

.frame span:nth-of-type(36) {
  -webkit-animation-delay: calc(var(--delay-character) * 36);
  animation-delay: calc(var(--delay-character) * 36);
}

.frame span:nth-of-type(37) {
  -webkit-animation-delay: calc(var(--delay-character) * 37);
  animation-delay: calc(var(--delay-character) * 37);
}

.frame span:nth-of-type(38) {
  -webkit-animation-delay: calc(var(--delay-character) * 38);
  animation-delay: calc(var(--delay-character) * 38);
}

.frame span:nth-of-type(39) {
  -webkit-animation-delay: calc(var(--delay-character) * 39);
  animation-delay: calc(var(--delay-character) * 39);
}

.frame span:nth-of-type(40) {
  -webkit-animation-delay: calc(var(--delay-character) * 40);
  animation-delay: calc(var(--delay-character) * 40);
}

.frame span:nth-of-type(41) {
  -webkit-animation-delay: calc(var(--delay-character) * 41);
  animation-delay: calc(var(--delay-character) * 41);
}

.frame span:nth-of-type(42) {
  -webkit-animation-delay: calc(var(--delay-character) * 42);
  animation-delay: calc(var(--delay-character) * 42);
}

.frame span:nth-of-type(43) {
  -webkit-animation-delay: calc(var(--delay-character) * 43);
  animation-delay: calc(var(--delay-character) * 43);
}

.frame span:nth-of-type(44) {
  -webkit-animation-delay: calc(var(--delay-character) * 44);
  animation-delay: calc(var(--delay-character) * 44);
}

.frame span:nth-of-type(45) {
  -webkit-animation-delay: calc(var(--delay-character) * 45);
  animation-delay: calc(var(--delay-character) * 45);
}

.frame span:nth-of-type(46) {
  -webkit-animation-delay: calc(var(--delay-character) * 46);
  animation-delay: calc(var(--delay-character) * 46);
}

.frame span:nth-of-type(47) {
  -webkit-animation-delay: calc(var(--delay-character) * 47);
  animation-delay: calc(var(--delay-character) * 47);
}

.frame span:nth-of-type(48) {
  -webkit-animation-delay: calc(var(--delay-character) * 48);
  animation-delay: calc(var(--delay-character) * 48);
}

.frame span:nth-of-type(49) {
  -webkit-animation-delay: calc(var(--delay-character) * 49);
  animation-delay: calc(var(--delay-character) * 49);
}

.frame span:nth-of-type(50) {
  -webkit-animation-delay: calc(var(--delay-character) * 50);
  animation-delay: calc(var(--delay-character) * 50);
}

.frame span:nth-of-type(51) {
  -webkit-animation-delay: calc(var(--delay-character) * 51);
  animation-delay: calc(var(--delay-character) * 51);
}

.frame span:nth-of-type(52) {
  -webkit-animation-delay: calc(var(--delay-character) * 52);
  animation-delay: calc(var(--delay-character) * 52);
}

@-webkit-keyframes frameMove {
  0% {
    top: 0;
    left: 0;
    transform: rotate(0deg);
  }

  24% {
    top: 0;
    left: 100%;
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  49% {
    top: 100%;
    left: 100%;
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  74% {
    top: 100%;
    left: 0%;
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  99% {
    top: 0%;
    left: 0%;
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes frameMove {
  0% {
    top: 0;
    left: 0;
    transform: rotate(0deg);
  }

  24% {
    top: 0;
    left: 100%;
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  49% {
    top: 100%;
    left: 100%;
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  74% {
    top: 100%;
    left: 0%;
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  99% {
    top: 0%;
    left: 0%;
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}