Animation of width with delay in CSS text alignment

I've been attempting to add an animation effect to my text so that it appears from left to right when the page loads. To achieve this, I have set up @keyframes to transition the text from 0% max-width to 100%.

However, I'm facing an issue where my text-align settings seem to take effect only after the animation has completed. All I want is for the text content itself to reveal itself in the intended position without delay, and I believe my code is correct.

Could there be something obvious that I am overlooking here? While I am relatively new to working with CSS, my research hasn't pointed out any inherent properties of animations or text-align that could be causing this behavior. I have included a snippet of my code below for reference. Thank you!

@keyframes leftright {
  0% {
    max-width: 0%;
  }
  100% {
    max-width: 100%;
  }
}

.test_1 {
  overflow: hidden;
  white-space: nowrap;
  width: 80vw;
  border: 1px solid red;
  font: bold 15vmin 'Playfair Display', serif;
  text-align: center;
  animation: leftright 1s;
}
<div class="test_1">Why hello there</div>

htmlcsscss-animationstext-align

Answer №1

When animating the width of the div, the content will gradually be revealed as the width increases. Another approach would be to animate pseudo-selectors in order to reveal the text.

I hope this outcome aligns with your expectations.

Check out the JS Fiddle example here

Answer №2

When animating the width of an element, achieving center alignment of text can be tricky when there is extra space. Luckily, a simple solution is to center the div itself using margin: 0 auto;.

@keyframes leftright {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.test_1 {
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  width: 80vw;
  border: 1px solid red;
  font: bold 15vmin 'Playfair Display', serif;
  text-align: center;
  animation: leftright 1s infinite;
}
<div class="test_1">Why hello there</div>

Answer №3

You might want to consider using a nested element with the same width and utilizing overflow to conceal it while keeping the text unchanged:

@keyframes leftright {
  0% {
    max-width: 0%;
  }
  100% {
    max-width: 100%;
  }
}

.test_1 {
  overflow: hidden;
  width: 80vw;
  border: 1px solid red;
  font: bold 15vmin 'Playfair Display', serif;
  text-align: center;
  animation: leftright 1s;
}

.test_1>span {
  display: inline-block;
  white-space: nowrap;
  width: inherit;
}
<div class="test_1"><span>Greetings!</span></div>

Answer №4

Hello @user10294993! You can achieve this by incorporating two keyframes - one for the box and the other for text animation. See the example below:

.test_1 {
overflow:hidden;
white-space: nowrap;
width: 80vw;
border: 1px solid red;
font: bold 15vmin 'Playfair Display', serif ;
text-align: center;
animation: leftright 1s infinite;
}

.test_1 p {
  margin: 0;
  animation: display 1s infinite;
} 

@keyframes leftright{
  from {max-width: 0%}
  to {max-width: 100%;}
}

@keyframes display{
  0% {opacity: 0}
  50% {opacity: 0}
  100% {opacity: 1}
}
<div class="test_1"><p>Why hello there</p></div>

Hope this information proves helpful to you.

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

"Upon clicking the facebox, a new page is opened and the

Currently, I'm on a page called mainpage.aspx and the code within it looks like this: <a rel="facebox" href="destination.htm?path=blabla">mainpage</a> I am using facebox() to load destination.htm. The issue arises when I attempt to t ...

asp.nethtmlquery-stringfacebox

JQuery is unable to validate a form that is being loaded from an external HTML file

I'm encountering an issue where my form imported into a separate HTML file is not validating using JQuery's $(form).validate() plugin. After following the guidance provided in this question, I successfully managed to get the form working. Howeve ...

javascriptjqueryhtmlajax

Malfunctioning Line in Apple Safari Causing ReactJS Issues

I am encountering an issue with my <div className={`${classes.center} ${classes.or}`}>OR</div>. It appears that this problem is specific to Apple Safari only. The alignment on the right side seems to be broken, although it works fine on Google ...

cssreactjsmaterial-uijss

font-family: code, code

Within the normalize.css file, there are rules for monospace fonts that include: font-family: monospace, monospace; How does this differ from just using: font-family: monospace; Could there be a specific reason for this? Perhaps it serves as a workaround ...

cssmonospacenormalize-css

Storing information in a database

Need help troubleshooting why my form isn't saving data to the database. <div class="container"> <div class="row" style="margin-top:200px;"> <form ENCTYPE="multipart/form-data" ACTION="upload.php" METHO ...

phphtml

The list elements will be oddly aligned, despite there being no reason for it to be adjusted

It seems like I'm the only one facing this issue in my course. Here are the browsers and versions I am using: Chrome 74.0.3729.169 Desktop Windows Firefox 67.0.1 Desktop Windows This is the HTML code I have: <html> <head> <!-- L ...

htmlbootstrap-4

In the middle of one div, there are two additional divs positioned nearby

I am facing a challenge with positioning three divs within one container. I want one to be on the right, another on the left, and the third one at the center, but so far I have not been successful; <div id="durum3" style="width: 100%; height: calc(10 ...

htmlcss

Styling with CSS or using tables: What should you choose?

Is there a way to replicate the frame=void functionality in CSS, or will I need to manually add frame=void to each table I create in the future? <table border=1 rules=all frame=void> I attempted to search for a solution online, but unfortunately, m ...

htmlcss

What is the recommended method for choosing text colors when creating GUI for app development?

Currently preparing PSDs for the development of both an iOS and Android app. When it comes to coloring text, should I: 1) Utilize #000000 for black text, adjusting opacity to achieve various shades of gray for primary and secondary text? 2) Or opt for a ...

androidioscssuser-interfacegraphics

Arranging a div's position in relation to an unrelated div

I need to position a div element called "a" below another div element known as "b". The HTML code has the following structure: <div id="a"></div> <form> <div id="b"></div> <div id="c"></div> </form> U ...

css

Guide to organizing a Bootstrap grid with 4 varying sizes of boxes

I'm just starting out with Bootstrap and I want to create a grid that resembles this design: https://i.sstatic.net/AQj53.png Below is the code I've written, but it's not quite giving me the layout I want: <!doctype html> <html> ...

htmlbootstrap-4

Show a button using CSS when the cursor is hovering

Expressing my gratitude to everyone! I need assistance with implementing a function in reactJS where the <button /> remains hidden during page loading and reveals itself when hovered over. Despite trying various methods, I have been unable to resolve ...

javascriptcssreactjsless

Determining the Width of a DIV Dynamically with CSS or LESS Depending on the Number of Siblings

One of my challenges involves a parent DIV with a width set to 100%. Dynamically, this parent DIV is filled with numerous children DIVs. I am trying to calculate and assign their widths using only the calc method in CSS or LESS. This is because the flex ...

javascripthtmlcssd3.jsless

Squarespace | Tips for Completely Removing the Footer in the Pacific Template

I must say, the footer on this website is incredibly stubborn. Let's take a look at subject A: URL: Hello there! I'm currently working on a website and I'm facing a challenge with the background not stretching to fit the entire window when ...

htmlcsstemplatesfootersquarespace

Obtaining the scene's coordinates in Three.js

Struggling with a coding issue, I've scanned various discussions that don't quite address my specific problem. Any assistance would be greatly appreciated. In my HTML document, I am using the three.js library to create a scene titled scaledScene ...

javascripthtmlthree.jscoordinatesscene

I encountered a data discrepancy while attempting to link up with a weather API

This is my debut app venture utilizing node.js and express for the first time. The concept behind this basic application involves connecting to an external API to retrieve temperature data, while also allowing users to input their zip code and feelings whi ...

javascripthtmlnode.jsapiexpress

"My drop down button menus and background image seem to be experiencing some technical difficulties. Can someone help

I'm having trouble getting a drop-down menu to work with a reptile image as the background. When I remove the image, the drop-down works fine. I've checked for errors but can't seem to find any. Is it an issue with the code or maybe a typing ...

htmlcss

When the loop is malfunctioning due to a certain condition

what happens if the condition in the controller file is not executed during runtime... ...

javascripthtmlnode.jsmongodb

Is there a way to retrieve the list element that was added after the HTML was generated?

How can I reference a list element added using the append function in jQuery within my onclick function? See my code snippet below: $(function() { let $movies = $('#showList') let $m = $('#show') $.ajax({ method: 'GET ...

javascripthtmljquery

Tips for adjusting background-image position after page scale increase

I have a div block with the specified styles: .promo-blocks .first-appointment { background-image: url("../images/41d000_e4b9806a75b61053f1d6d4ccab8903df.png_srz_980_345_85_22_0.50_1.20_0 (2).00_png_srz"); position: relative; background-c ...

htmlcss