gpt4 book ai didi

css - 让 CSS 动画显示列表中的最后一项

转载 作者:太空宇宙 更新时间:2023-11-03 22:45:05 26 4
gpt4 key购买 nike

我正在尝试仅使用 CSS3 创建一个动画,它将显示一个元素列表。

我已经能够创建循环播放列表中每个元素的动画,但是,我无法找到让动画在显示列表中的最后一个元素时结束的解决方案。

基本上,我希望动画以“Johnney be good”字样结束。

据推测,这已被问及回答:Stopping a CSS3 Animation on last frame

但是,我不知道该解决方案是否或如何应用于我的问题。感谢您的帮助,非常感谢。

#sentence-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: serif;
padding: 10px;
}
.sentence{
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.sentence span{
color: #444;
font-size: 200%;
font-weight: normal;
}
.words{
display: inline;
text-indent: 10px;
}
.words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 12s 1 0s;
-moz-animation: rotateWord 12s 1 0s;
-o-animation: rotateWord 12s 1 0s;
-ms-animation: rotateWord 12s 1 0s;
animation: rotateWord 12s 1 0s;
}
.words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #6b969d;
}
.words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #6b969d;
}
.words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-o-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #6b969d;
}
@-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; }
}
<div id="sentence-wrapper">
<div class="sentence">
<span>Johnney </span>
<div class="words words-1">
<span><em>smart</em></span>
<span><em>clever</em></span>
<span><em>awesome</em></span>
<span>be good</span>
</div>

</div>

</div>

最佳答案

“做个好人”<span>使用与另一个 rotateWord 相同的动画 ( <span> )秒。以 opacity: 0; 结尾.如果你不想让“be good”在淡入之后淡出,你应该为它定义一个单独的动画:

@keframes rotateWordFinal{
0% { opacity: 0; }
50% { opacity: 0; -webkit-transform: translateY(-30px); }
100% { opacity: 1; -webkit-transform: translateY(0px);}
}

.words-1 span:nth-child(4){
animation: rotateWordFinal 6s 1 9s;
}

此外:您正在为动画属性使用各种前缀,但不是为实际的 @keyframes .最好保持一致。

关于css - 让 CSS 动画显示列表中的最后一项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42349679/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com