.wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: table;
  height: 100vh;
}

.text-animation {
  display: table-cell;
  vertical-align: middle;
  padding: 0px;
  text-align: center;
}
.text-animation a {
  font-size: 60px;
  line-height: 1;
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  text-transform: capitalize;
  text-decoration: none;
  color: #fff;
}
.text-animation a span {
  display: inline-block;
  vertical-align: top;
  transform: rotate3d(0, 1, 0, 360deg);
  transition: transform 1.4s, color 0.2s ease-in;
}
.text-animation a span:nth-child(1) {
  transition-delay: 1s;
}
.text-animation a span:nth-child(2) {
  transition-delay: 0.8s;
}
.text-animation a span:nth-child(3) {
  transition-delay: 0.6s;
}
.text-animation a span:nth-child(4) {
  transition-delay: 0.4s;
}
.text-animation a span:nth-child(5) {
  transition-delay: 0.2s;
}
.text-animation a:hover {
  text-decoration: none;
  color: #630404;
}
.text-animation a:hover:before {
  transform: translate3d(0, 0, 0);
}
.text-animation a:hover span {
  color: #f00;
  transform: rotate3d(0, 1, 0, 0deg);
  transition: transform 1.4s, color 0.2s ease-in;
}
.text-animation a:hover span:nth-child(1) {
  transition-delay: 0.2s;
}
.text-animation a:hover span:nth-child(2) {
  transition-delay: 0.4s;
}
.text-animation a:hover span:nth-child(3) {
  transition-delay: 0.6s;
}
.text-animation a:hover span:nth-child(4) {
  transition-delay: 0.8s;
}
.text-animation a:hover span:nth-child(5) {
  transition-delay: 1s;
}
.text-animation a:before {
  content: "";
  position: absolute;
  height: 96%;
  width: 100%;
  border-width: 2px 0;
  border-color: #630404;
  border-style: solid;
  left: 0;
  transform: translate3d(-100%, 0, 0);
  transition: transform 1.4s linear;
}