我正在使用 css 代码淡入然后淡出一个 html div,并在延迟后淡入另一个 div。但是,在第二个 div 淡入并且代码结束后,第一个 div 重新出现。我正在使用的代码发布在下面。我想知道如何确保第一个 div dosent 在代码结束后重新出现。
.text {
-webkit-animation: fadein 5s
}
@-webkit-keyframes fadein {
0% {
opacity: 0;
}
35% {
opacity: 1;
}
72% {
opacity:1;
}
100% {
opacity:0;
}
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.bdy {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.bdy {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}
HTML:
<header>
<div class="text_paragraph">
<h1>DEMO</h1>
<h3>Secondary School</h3>
<h3>Grade</h3>
</div>
<div class="bdy">
<h1>hi</h1>
</div>
</header>
最佳答案
你可以做这样的事情......这是一个jsFiddle
Obs: 除了 -webkit- 之外,添加其他 css 选择器以使其跨浏览器
CSS
.text_paragraph {
-webkit-animation: fadeInOut 2s;
opacity:0;
}
.bdy {
-webkit-animation:fadeIn 3s;
}
@-webkit-keyframes fadeInOut{
0% {
opacity: 0;
}
35% {
opacity: 1;
}
72% {
opacity:1;
}
100% {
opacity:0;
}
}
@-webkit-keyframes fadeIn{
0% {
opacity: 0;
}
75% {
opacity:0;
}
100% {
opacity:1;
}
}
关于html - 过渡后保持div淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26636514/