svg {
  transform: scale(0.7, 0.7);
}

#previous svg {
  transform: scale(3, 3);
  opacity: 0.2;
  left: 50%;
  position: relative;
  animation-name: translatorPrevious;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes translatorPrevious {
  0% {
  }

  100% {
    opacity: 0;
  }
}

#current svg {
  transform: scale(5, 5);
  position: relative;
  animation-name: translatorCurrent;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes translatorCurrent {
  0% {
    left: 50%;
  }

  100% {
    left: -50%;
    opacity: 0.5;
    transform: scale(3, 3)
  }
}

#next svg {
  transform: scale(3, 3);
  opacity: 0.5;
  position: relative;
  animation-name: translatorNext;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes translatorNext {
  0% {
    left: 50%;
  }

  100% {
    left: -50%;
    opacity: 1;
    transform: scale(5, 5)
  }
}

#nextTwo {
  position: absolute;
  left: 83%;
}

#nextTwo svg {
  transform: scale(3, 3);
  opacity: 0.5;
  animation-name: opacityNextTwo;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes opacityNextTwo {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.5;
  }
}

#previous>svg {
  height: 50vh;
}

#current>svg {
  height: 50vh;
}

#next>svg {
  height: 50vh;
}

#nextTwo>svg {
  height: 50vh;
}