在CSS中键入动画无效(在动画开始前显示文本)

Question

在HTML和CSS中，我正在开发一个将视频与动画文本链接的项目。文本在一个评论框(".ellow_rec"(中设置动画。这个评论框在一个橙色框(".org_rec"：用作背景(中。我的主要问题是评论在动画开始之前出现。我想把它们隐藏起来，直到它们被输入存在。根据我的理解，溢出：隐藏是为了解决这个问题，但事实并非如此。我是HTML和CSS的新手。谢谢你的帮助！

这是我的HTML 的一部分

<div class="org_rec">  
<div class="yellow_rec"> 
<div class = "comment1">
<h2>Should I get roses or carnations? I’ll go with the cheaper option. I guess.</h2>
</div>
<div class = "comment2">
<h2> Pink's nice, but most of the flowers are dying. I’ll get the yellow ones. They’re budding.  </h2>
</div>
</div>
</div>

这是我的CSS 的一部分

.org_rec{
height: 600px;
background:rgb(255, 132, 0);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;}
.yellow_rec{
position: relative;
background: #FAFF00;
border: 5px solid #000000;
box-sizing: border-box;
border-radius: 60px;
max-width: 80%;
padding: 50px;}
h2{
font-family: 'Source Code Pro', monospace;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 2.5;}

@keyframes typing{
0% { width: 0%; visibility: hidden; }
1% {border-right: 0px solid white;}
99% {border-right: 0px solid white;}
100% { width: 100%; visibility: visible;}}
.comment1{
overflow: hidden;
animation: typing 3s linear 3s;
white-space: nowrap;}
.comment2{overflow: hidden;
animation: typing 3s linear 3s;
white-space: nowrap;}

Answer 1

我将visibility: hidden;添加到您的注释1和注释2div中，这样它们在动画开始时就不会显示任何内容。

这就是你要找的吗？(运行下面的代码段(。

.org_rec{
height: 600px;
background:rgb(255, 132, 0);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;}
.yellow_rec{
position: relative;
background: #FAFF00;
border: 5px solid #000000;
box-sizing: border-box;
border-radius: 60px;
max-width: 80%;
padding: 50px;
animation-name: typing;
}
h2{
font-family: 'Source Code Pro', monospace;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 2.5;}

@keyframes typing{
0% { width: 0%; visibility: visible; }
1% {border-right: 0px solid white;}
99% {border-right: 0px solid white;}
100% { width: 100%; visibility: visible;}}
.comment1{
visibility: hidden;
overflow: hidden;
animation: typing 3s linear 3s;
white-space: nowrap;
animation-fill-mode: forwards; 
}
.comment2{
visibility: hidden;
overflow: hidden;
animation: typing 3s linear 3s;
white-space: nowrap;
animation-fill-mode: forwards; 
}

<div class="org_rec">  
<div class="yellow_rec"> 
<div class = "comment1">
<h2>Should I get roses or carnations? I’ll go with the cheaper option. I guess.</h2>
</div>
<div class = "comment2">
<h2> Pink's nice, but most of the flowers are dying. I’ll get the yellow ones. They’re budding.  </h2>
</div>
</div>
</div>