如何正确包装动画单词循环？

由 发布于

How can I make this animated word cycle (made up of absolute positioned spans) to wrap correctly as if it were a regular word inside .sentence? Maybe it's possible to add a ghost inline element with a fixed width (the width of the larger word in the cycle)?

/*Body*/

body {
  background-color: #00abe9;
  font-family: 'Raleway', sans-serif;
}


/*Heading1*/

h1 {
  color: #fff;
  font-size: 44px;
  margin-top: 40px;
  text-align: center;
}


/*Sentence*/

.sentence {
  color: #222;
  font-size: 30px;
  text-align: left;
}


/*Wrapper*/

.wrapper {
  background-color: #f5f5f5;
  font-family: 'Raleway', sans-serif;
  margin: 100px auto;
  padding: 40px 40px;
  position: relative;
  width: 70%;
}


/*Vertical Sliding*/

.slidingVertical {
  display: inline;
  text-indent: 8px;
}

.slidingVertical span {
  animation: topToBottom 12.5s linear infinite 0s;
  -ms-animation: topToBottom 12.5s linear infinite 0s;
  -webkit-animation: topToBottom 12.5s linear infinite 0s;
  color: #00abe9;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

.slidingVertical span:nth-child(2) {
  animation-delay: 2.5s;
  -ms-animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
}

.slidingVertical span:nth-child(3) {
  animation-delay: 5s;
  -ms-animation-delay: 5s;
  -webkit-animation-delay: 5s;
}

.slidingVertical span:nth-child(4) {
  animation-delay: 7.5s;
  -ms-animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s;
}

.slidingVertical span:nth-child(5) {
  animation-delay: 10s;
  -ms-animation-delay: 10s;
  -webkit-animation-delay: 10s;
}


/*topToBottom Animation*/

@-moz-keyframes topToBottom {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -moz-transform: translateY(-50px);
  }
  10% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -moz-transform: translateY(50px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes topToBottom {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -webkit-transform: translateY(50px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes topToBottom {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -ms-transform: translateY(-50px);
  }
  10% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  30% {
    opacity: 0;
    -ms-transform: translateY(50px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
<section class="wrapper">
  <h2 class="sentence">Our product is
    <div class="slidingVertical">
      <span>Amazing.</span>
      <span>Beautiful.</span>
      <span>Cute.</span>
      <span>Delightful.</span>
      <span>Emotional.</span>
    </div>
  </h2>
</section>

View the CodePen.