.wrapper {
  background: orange;
}
.wrapper:nth-child(2) {
  background: cornflowerblue;
}
.inner {
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  color: #fff;
}
.back-to-position {
  opacity: 0;
  transition: 1s;
}
.back-to-position.to-bottom {
  transform: translateY(-50px);
}
.back-to-position.to-top {
  transform: translateY(50px);
}
.show .back-to-position {
  opacity: 1;
  transform: translate(0);
}
.back-to-position.to-right {
  transform: translateX(-150px);
}
.back-to-position.to-left {
  transform: translateX(150px);
}
.show .back-to-position.delay-0 {
  transition-delay: 0s;
}
.show .back-to-position.delay-1 {
  transition-delay: 0.3s;
}
.show .back-to-position.delay-2 {
  transition-delay: 0.5s;
}
.show .back-to-position.delay-3 {
  transition-delay: 0.7s;
}