gpt4 book ai didi

关键帧动画后CSS3消失

转载 作者:行者123 更新时间:2023-11-28 09:05:48 25 4
gpt4 key购买 nike

<分区>

我正在使用 css3 为一些文本设置动画。我只是想让它淡入,然后消失,只是在几秒钟后(在其他动画之后)再做一次。我遇到的问题是我的文字淡入但立即消失,即使我有关键帧完成 @ opacity:1;为什么我的文字消失了?这是代码:

<style>
#myArea {
height:250px;
width:300px;
position:relative;
overflow:hidden;
}

.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
opacity:1;

}

#txt1 {
animation: txt1-fade 1s 1 ease-in;
animation-delay:1s;
}

#txt2 {
-webkit-animation: txt2-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt2-fade 5s infinite;
}

#txt3 {
-webkit-animation: txt3-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt3-fade 5s infinite;
}

@keyframes txt1-fade {
0% {opacity: 0; left:10px;}
100% {opacity: 1; left:10px;}
}
</style>
<body>
<div id="myArea">

<img src="images/backgrnd.jpg" />

<div id="txt1" class="text">
<img src="images/text1.png" />
</div>

<div id="txt2" class="text">
<img src="images/text2.png" />
</div>

<div id="txt3" class="text">
<img src="images/text3.png" />
</div>

</div>

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