CODEWITHSUNDEEP
htmlcssanimationcss-animations
Victoria Grzesiak
Victoria Grzesiak

Reputation: 5

Typing animation in CSS not working (displays text before animation begins)

Within HTML and CSS, I am working on a project that links a video with animated text. The text is animated within a comment box (".yellow_rec"). This comments box is within an orange box (".org_rec": acts as a background) My main issue is that the comments are appearing before the animation begins. I want them hidden until they are typed into existence. From my understanding, overflow:hidden is suppose to take care of this, but it is not. I am fairly new to HTML and CSS. Thank you for your help!

This is a part of 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>

This is part of my 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;}

Upvotes: 0

Views: 426

Answers (1)

Aib Syed
Aib Syed

Reputation: 3196

I added visibility: hidden; to your comment1 and comment 2 divs, this way they show nothing at the start of the animation.

Is this what you're looking for? (Run snippet below).

.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>

Upvotes: 1

Related Questions