防止隐藏最后一个css动画

我有一个CSS动画，我在网上找到可以循环浏览网站标题，但此刻当最后一个标题出现时，它也隐藏起来，这意味着最后没有标题可见。防止隐藏最后一个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>

来源

2017-09-14 Jane Doe

尝试它，我认为它有助于充分

.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

来源

2017-09-14 17:59:29

您可以创建为最后新在这样的容器：

.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>

来源

2017-09-14 17:48:49 kukkuz

这是一个不错的解决方案，但与之前的最后的最后标题的过渡不是很无缝我标记为正确的答案... –

是的，这很酷。我并没有考虑完善这一过渡，而是想让你知道方向，以便你能够继续前进。如果答案对您有帮助，也可以upvote，谢谢！ :) – kukkuz

防止隐藏最后一个css动画

回答

相关问题