CSS animation for typing effect not functioning correctly as text is being displayed before the animation starts

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;}

Answer №1

Your comment1 and comment2 divs now have `visibility: hidden;` added to them, ensuring they are not visible at the beginning of the animation.

Does this meet your requirements? (Execute 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There are no errors with PHP and it fails to insert any entries into the database

I am struggling to save secq (secret question) and seca (secret answer) in the database. Even though I don't encounter any errors during the registration process, the values of the variables are successfully passed through POST when echoed. Despite ...

What is the proper way to incorporate a hashtag (#) into a PHP parameter within a URL

Currently, I am sending a PHP request to a login handler using the following URL: https://example.com/test.php?username=test123&password=hiuhsda3#24 However, I need to retain the hashtag in either the password or username along with anything that come ...

Issue with Bootstrap 4 custom list-group collapse arrow not working as expected

I recently customized a Bootstrap 4 list-group to include collapse functionality. In my customization, I added a CSS caret arrow with the following behavior: 1. Initially pointing down 2. Clicked once, it points up 3. Clicked again, it returns to the init ...

Troubleshooting a Scrolling Problem in AngularJS页面

My web page design incorporates a header, content body, and footer using Responsive and Angular Material. Within the Content Body, there is an md-content element containing multiple text paragraphs enclosed in <p>. I have set the overflow to auto (ov ...

Storing a webpage in HTML with the use of @import function in CSS

I'm looking to save an entire HTML page, but I'm running into an issue with the CSS file that includes the line: import url('someOtherCss.css'); When attempting to save the page using Firefox or Chrome with 'File->Save Page a ...

What are the steps to assign a personalized title to the PDF file being saved with the FPDF toolkit?

If you're familiar with the solution, just refer to the end where it says Question, so you can skip the explanation and save time. Currently, I am utilizing the FPDF library which typically opens PDFs directly in the browser by default. To change th ...

The way images appear can vary between desktop and mobile devices

I am in the process of creating a photography website with a simple goal of displaying images down the page one after another. However, I am encountering issues with uniform display across various desktop and mobile platforms. The site appears perfect on i ...

Numerical values are not considered by the JavaScript table filter

I'm having trouble with dynamically filtering the content. It works fine for the first two columns, but not for the third one. Maybe I need some additional JavaScript? Here is the link to my snippet: `https://www.w3schools.com/code/tryit.asp?filen ...

Modify the HTML indentation style in Visual Studio 2008

When working with Visual Studio 2008, I have noticed that it insists on indenting HTML in a specific way: <h1> title</h1> <h2> subtitle</h2> However, I personally prefer the following indentation style: <h1>title< ...

What are the connections between osCommerce "box" files and CakePHP?

My previous experience involves working with the osCommerce shopping cart and I appreciate how they use "require" to easily add different boxes to the left or right side columns of the website. require(DIR_WS_BOXES . 'shopping_cart.php'); I am ...

Angular's Validator directive offers powerful validation capabilities for reactive forms

Referenced from: This is the approach I have experimented with: custom-validator.directive.ts import { Directive } from '@angular/core'; import { AbstractControl, FormControl, ValidationErrors } from '@angular/forms'; @Directive({ ...

Differences in rendering of HTML select element between Chrome on macOS and Chrome on Windows

During testing of a section of the app at my workplace, it was discovered that dropdowns and select elements in a specific UI scenario appeared differently on Chrome for Windows and Ubuntu compared to Chrome for macOS. I attempted to analyze the elements ...

Personalize the md-tab component in Angular 2

I'm encountering an issue with styling the md-tab component in Angular 2. While I understand that Angular 2 Materials is currently under development, I am wondering if there is a way to customize it, such as removing the bottom-radius. Below is an exa ...

Is there a way to initiate animations seamlessly?

Instead of relying on a plugin, I decided to create a simple marquee from scratch. It was a fairly easy process and it works well overall. However, there is one thing that bothers me - the animation starts off slow and then speeds up. Is there a way to mai ...

Automatically trigger a page reload using a jQuery function

Currently facing an issue with jQuery. I created a drop-down menu and would like it to expand when the li tag within the menu is clicked. Even though I am using the jQuery click function successfully, there seems to be a problem where the webpage refreshe ...

What could be the reason for the lack of CSS being applied to elements sharing the same class?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...

What are the steps to configure or reach a page located in a subdirectory of a different project within a Laravel/OctoberCMS website

I have developed a website using an OctoberCMS theme, hosted on a DigitalOcean server. I am looking to integrate a separate project (specifically the code from Matomo analytics) onto the same server and create a public page that can be accessed at my_site. ...

The elusive Holy Grail layout for Flex content cannot be achieved on IE11

UPDATE I attempted to insert height:100vh into the .app-container, but unfortunately, it did not have the desired effect. I am utilizing bootstrap 4 for creating my web application. My goal is to implement the Holy grail layout. Everything appears to be ...

Displaying feedback messages and redirecting in Flask may result in the response being visible in the developer tools, but

Just starting out with Flask and encountering an issue. I am trying to determine if a response is empty, and if it is, display a message. The problem lies in the fact that even though the redirect works and the subsequent GET request returns the correct HT ...

Use jQuery's animate function to toggle a different div when clicking on one

Having trouble with a jQuery function that keeps triggering the second function every time I click. How can I fix this issue? I designed a navbar with 3 links, each linked to a different .contentDiv with unique IDs. Whenever a link is clicked, a toggle fu ...