防止最后一个 CSS 动画隐藏

Question

我在网上找到了一个 CSS 动画来循环浏览网站标题，但此刻，当最后一个标题出现时，它也隐藏了，这意味着最后没有可见的标题。

我花了最后一个小时试图解决的问题是如何让 css 动画像现在这样工作，除非最后一个标题出现，而不是滑出和隐藏，它只是停留在那里。 ..

这是我所拥有的：

.rw-sentence {
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.rw-sentence span {
  font-size: 200%;
  font-weight: normal;
}

.rw-words {
  display: inline;
}

.rw-words-1 span {
  position: absolute;
  opacity: 0;
  -webkit-animation: rotateWord 7.5s linear;
  -ms-animation: rotateWord 7.5s linear;
  animation: rotateWord 7.5s linear;
}

.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}

.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 4.5s;
  -ms-animation-delay: 4.5s;
  animation-delay: 4.5s;
}

.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}

.rw-words-1 span:nth-child(6) {
  -webkit-animation-delay: 7.5s;
  -ms-animation-delay: 7.5s;
  animation-delay: 7.5s;
}

@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -ms-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -ms-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media screen and (max-width: 768px) {
  .rw-sentence {
    font-size: 18px;
  }
}

@media screen and (max-width: 320px) {
  .rw-sentence {
    font-size: 9px;
  }
}

<span class="h2 homeTitle rw-words rw-words-1">
  <span>First headline.</span>
  <span>Second headline.</span>
  <span>Third headline.</span>
  <span>Fourth headline.</span>
  <span>Fifth headline.</span>
  <span>My final headline...</span>
</span>

Answer 1

尝试一下，我认为它很有帮助

.rw-sentence {
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.rw-sentence span {
  font-size: 200%;
  font-weight: normal;
}

.rw-words {
  display: inline;
}
.rw-words-1 span:last-child {
      -webkit-animation: rotateend 8s 1 forwards 6s;
      -ms-animation: rotateend 8s 1 forwards 6s;
      animation: rotateend 8s 1 forwards 6s;
}
@keyframes rotateend {
      0% {
        opacity: 0;
      }
      2% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
      }
      5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
      }
      17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
      }
      100% {opacity: 1}
  }
.rw-words-1 span {
  position: absolute;
  opacity: 0;
  -webkit-animation: rotateWord 7.5s linear;
  -ms-animation: rotateWord 7.5s linear;
  animation: rotateWord 7.5s linear;
  -webkit-animation-fill-mode: forwards;
}

.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -webkit-animation-fill-mode: forwards;
}

.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-fill-mode: forwards;
}

.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 4.5s;
  -ms-animation-delay: 4.5s;
  animation-delay: 4.5s;
  -webkit-animation-fill-mode: forwards;
}

.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  -webkit-animation-fill-mode: forwards;
}

.rw-words-1 span:nth-child(6) {
  -webkit-animation-delay: 7.5s;
  -ms-animation-delay: 7.5s;
  animation-delay: 7.5s;
  -webkit-animation-fill-mode: forwards;
  
  
  
}

@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -ms-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -ms-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media screen and (max-width: 768px) {
  .rw-sentence {
    font-size: 18px;
  }
}

@media screen and (max-width: 320px) {
  .rw-sentence {
    font-size: 9px;
  }
}

<span class="h2 homeTitle rw-words rw-words-1">
  <span>First headline.</span>
  <span>Second headline.</span>
  <span>Third headline.</span>
  <span>Fourth headline.</span>
  <span>Fifth headline.</span>
  <span>My final headline...</span>
</span>

我添加了一些 CSS

Answer 2

您可以像这样为容器中的last span 创建一个新的animation：

.rw-words-1 span:not(:last-child) {
  position: absolute;
  opacity: 0;
  -webkit-animation: rotateWord 7.5s linear;
  -ms-animation: rotateWord 7.5s linear;
  animation: rotateWord 7.5s linear;
}

.rw-words-1 span:last-child {
   position: absolute;
  -webkit-animation: showWord 8s linear;
  -ms-animation: showWord 8s linear;
  animation: showWord 8s linear;
}

和keyframe 动画是这样的：

@keyframes showWord {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  95% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

请看下面的演示 - 我想你可以从这一点开始：

.rw-words {
  display: inline;
}

.rw-words-1 span:not(:last-child) {
  position: absolute;
  opacity: 0;
  -webkit-animation: rotateWord 7.5s linear;
  -ms-animation: rotateWord 7.5s linear;
  animation: rotateWord 7.5s linear;
}

.rw-words-1 span:last-child {
  position: absolute;
  -webkit-animation: showWord 8s linear;
  -ms-animation: showWord 8s linear;
  animation: showWord 8s linear;
}

.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}

.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 4.5s;
  -ms-animation-delay: 4.5s;
  animation-delay: 4.5s;
}

.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}

@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -ms-transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -ms-transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes showWord {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  95% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

<span class="h2 homeTitle rw-words rw-words-1">
  <span>First headline.</span>
  <span>Second headline.</span>
  <span>Third headline.</span>
  <span>Fourth headline.</span>
  <span>Fifth headline.</span>
  <span>My final headline...</span>
</span>