加载效果重复。不重定向到主页

Question

传递啤酒动画后，首页不出现。动画不断重复。我想在动画通过后重定向到我的主页。啤酒升完后，他应该带我去另一页。

jsfiddle.net/sehzade/0hzr6L7k

Answer 1

      body {
  background: #141414;
  width: 100%;
  height: 100%;
}

.loading {
  text-transform: uppercase;
  font-family: 'Cabin Condensed', sans-serif;
  font-weight: bold;
  font-size: 100pt;
  text-align: center;
  height: 160px;
  line-height: 120px;
  vertical-align: bottom;
  position: absolute;
  left: 0;
  right: 0;
  top: 120px;
  bottom: 0;
  display: block;
}

.loading-2 {
  top: 275px;
  width: 520px;
  height: 180px;
  font-size: 0;
  background: rgba(255, 255, 255, 0.06);
  margin: 0 auto;
}

.ff {
  position: absolute;
  font-size: 16pt;
  top: -10px;
  color: white;
  line-height: 16pt;
}

.loading-2-text {
  background-image: url("https://i.stack.imgur.com/6QiUg.png");
background-size: cover;
background-repeat: no-repeat;
position: fixed;
background-attachment: scroll;
background-position: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
z-index: 0;
}

@keyframes wave-animation {
  0% {
    background-position: 0 bottom;
  }
  100% {
    background-position: 300px bottom;
  }
}
@keyframes loading-animation {
  0% {
    background-size: 300px 0px;
  }
  100% {
    background-size: 300px 300px;
  }
}
.wave {
  background-image: url("https://i.stack.imgur.com/fJsn0.jpg");
  -moz-background-clip: text;
  -o-background-clip: text;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0px 0px rgba(255, 255, 255, 0.06);
  animation: wave-animation 1s infinite linear, loading-animation 10s infinite linear alternate;
  background-size: 250px 150px;
  background-repeat: repeat-x;
  opacity: 1;
}

.wave-2 {
  -moz-background-clip: initial;
  -o-background-clip: initial;
  -webkit-background-clip: initial;
  background-clip: initial;
  display: inline-block;
}

<div class="loading loading-2 wave wave-2">
  <div class="ff"></div>
  <div class="loading-2-text"></div>
</div>