CSS text-align delay with width animation

Question

I am trying to animate my text to appear from left to right on page load. This is done by simply setting @keyframes to transition from 0% max-width to 100%.

However my text-align settings seem to be applied only after the animation is complete. I just want the text content itself to reveal itself where I intend it to be, and assumed my code is correct.

Am I missing something obvious here? I'm fairly new to CSS, but my research doesn't seem to indicate there are inherit properties of animation or text-align that should cause this. Code example below. Thanks!

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

Allan Jebaraj · Accepted Answer · 2018-08-30T13:07:38.247

3

You're animating the width of the div. So the content will be revealed as the width increases. Alternatively, you could animate pseudo-selectors and reveal the text.

Hope this is the result you're expecting.

JS Fiddle

edited Aug 30 '18 at 13:07

answered Aug 30 '18 at 12:49

Allan Jebaraj

1,062
8
25

Ah that is exactly what I was aiming for, thank you! To make sure I understand you and @serg regarding how `width` and `text-align` interact in animation--Am I correct in saying that `text-align` is checking the size of the `
` at every frame of the animation? Once it expands wide enough to have extra space beyond the text, it slides the text to keep it centered?
– J Lou Aug 30 '18 at 13:14
1

Yes. At first the container would be of less width than the text's width. As the animation happens, the container gradually increases in width and finally gets wider than the text. Then the text would start to become centered. – Allan Jebaraj Aug 30 '18 at 13:18

score 1 · Answer 2 · answered Aug 30 '18 at 12:44

You're animating the width of the element. Center alignment of text is only apparent when there is extra space. A very simple fix however is to center the div itself with 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>

Thanks, I actually discovered that myself. However I want it to reveal from left to right starting with the "W", so I don't think I can use `margin` in this case. — J Lou, Aug 30 '18 at 13:05

score 1 · Answer 3 · answered Aug 30 '18 at 12:51

You may consider a nested element where you apply the same width and then rely on overflow to hide it and keep 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>Why hello there</span></div>

score 0 · Answer 4 · answered Aug 30 '18 at 12:58

Welcome @user10294993! You can do it adding two keyframes: one for de box and othe for the text. Here is an example:

.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 it helps you.

CSS text-align delay with width animation

4 Answers4

Linked