如何解决CSS动画不会在动画后延迟和重置
基本上,我需要使用CSS动画来使3行文本一一消失(没有JavaScript或其他CSS模块)
这是我为此编写的错误代码:
body{background-color: black;}
.text-zone{
position: absolute;
left: 20%;
top: 35%;
width: 50%;
max-height: 90%;
}
.text{
font-size: 60px;
color: #fff;
line-height: 53px;
font-weight: 600;
font-family: 'Alegreya Sans',sans-serif;
}
#delayedText1 {
opacity: 0;
animation-name: fade1;
animation-duration: 1s;
animation-delay: 1s;
}
#delayedText2 {
opacity: 0;
animation-name: fade2;
animation-duration: 1s;
animation-delay: 1s;
}
#delayedText3 {
opacity: 0;
animation-name: fade3;
animation-duration: 1s;
animation-delay: 1s;
}
@keyframes fade1 {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fade2 {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fade3 {
from {opacity: 0;}
to {opacity: 1;}
}
<div class="text-zone">
<div class="text">
<h1 id="delayedText1">Hi,</h1>
<h1 id="delayedText2">I'm Faizan,</h1>
<h1 id="delayedText3">web developer.</h1>
</div>
</div>
因此,当此命令运行时,该页面空白一秒钟,然后所有文本立即消失,一秒钟后消失。这是我第一次使用CSS动画,因此这可能是一个简单的问题。请有人可以向我解释哪里出了问题。
谢谢。
解决方法
#delayedText1 {不透明度:0;动画名称:fade1;动画时间:2秒;动画延迟:3秒; }#delayedText2 {opacity:0;动画名称:fade2;动画时间:2秒;动画延迟:6秒; }#delayedText3 {opacity:0;动画名称:fade3;动画时间:2秒;动画延迟:9秒; }
与您在此处输入的代码相同,您应该将其合并到脚本中,这样才能正常工作 好运
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。