In the realm of HTML and CSS, I am currently immersed in a project that integrates a video with animated text. The text is brought to life within a comment box (class: "yellow_rec") that is nested inside an orange background box (class: "org_rec"). My main hurdle lies in the fact that the comments are visible before the animation kicks in, whereas I want them to remain hidden until they are dynamically typed into existence. Despite my attempts with overflow:hidden, the issue persists. As someone still new to the world of HTML and CSS, any guidance you can offer would be greatly appreciated!
Snippet from my 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 snippet related to this portion:
.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;}