Simple appearing animation

Question

Just make a very very simple animation:

p {
  animation: appear 1s linear 1;
  font-family:monospace;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<p>Thank you for any helps!</p>

It works, but I am just thinking is it possible to make the first letter appear first, after the first letter appearing, then the second, and finally the last letter (now the whole content of p will appear at the same time)

Does CSS have any selectors to select every characters in the element and is it possible to achieve the effect use CSS only?

I only know first-letter and last-letter selector in css, but not sure if css has selector for every letters

If not only with CSS, I would be also Ok with JS solution?

Appreciate for any helps provided~

Splitting.js is great for this - it automatically breaks blocks of text into lines, words or single characters, and it works wonderfully with CSS transitions. https://splitting.js.org/ — Sigurd Mazanti, Feb 28 '22 at 22:34
@SigurdMazanti, interesting, maybe consider writing an answer for it? Because I never hear that before and I mostly written in vanilla js — James, Feb 28 '22 at 22:38
If you use a mono space font you can do it in pure CSS. Otherwise you’ll need to put each character in its own element. — A Haworth, Feb 28 '22 at 22:44
@AHaworth, how does the font make the difference??? I changed it in my code snnipet above, seems no difference? — James, Feb 28 '22 at 22:47
You could use [scss for](https://sass-lang.com/documentation/at-rules/control/for) loop to populate it but that would be a terrible solution. It would work nicely when you have fixed size text (also requires a separated tag for each letter) — n1md7, Feb 28 '22 at 22:47
If you use a monospace font you can expand the width of the containing p element in a CSS animation one ch step at a time. Is it acceptable to have a monospace font for your application? — A Haworth, Feb 28 '22 at 22:56
@AHaworth, I just try to use the way you have, but seems not working, do you mind share an working example or writting an answer? — James, Mar 01 '22 at 13:40

score 1 · Accepted Answer · answered Feb 28 '22 at 22:52

1

Here's a vanilla JS approach. First we extract the text, empty the element, then rebuild it one character at a time.

let p = document.querySelector('.anim');
// store value
let t = p.innerText.split(''),
  counter = 0
p.innerHTML = '';

let inter = setInterval(() => {
  if (counter == t.length) clearInterval(inter)
  else p.insertAdjacentHTML('beforeend', `<span>${t[counter++]}</span>`);
}, 100)

p.anim span {
  animation: appear 1s linear 1;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<p class='anim'>Thank you for any helps!</p>

answered Feb 28 '22 at 22:52

Kinglish

23,358
3
22
43

Thanks so much ! A very nice answer. Just wonder will be using `textContent` better than `innerText`? I know it is a little bit off-topic and easy to search, but just curious on your opinion? – James Mar 01 '22 at 01:23
1

They are mostly interchangeable -- though you can see the differences here: https://stackoverflow.com/a/35213639/1772933 – Kinglish Mar 01 '22 at 01:36
`counter == t.length ? clearInterval(inter) : p.insertAdjacentHTML('beforeend', ${t[counter++]} );` will be shorter, but anyways thanks. I will accept your answer. – James Mar 01 '22 at 23:06

Terry · Answer 2 · 2022-02-28T22:58:30.070

If a JS-based solution is acceptable, then you can easily achieve this using a combination of DOM manipulation (wrapping each non-space character in a <span> element), and then sequentially toggling a class that runs the animation.

The sequential part can be achieved by simply looping through the generated <span> element, and then awaiting for a promise to be resolved.

In your question it is not clear how you want to be a delay to be calculated: I simply assume you want an arbitrary/customizable delay. In this case, a simple promise-based sleep function can get the job done:

function sleep(ms = 0) {
  return new Promise(r => setTimeout(r, ms));
}

async function fadeInCharacters(el) {
  // NOTE: Use a custom data- attribute to ensure we only target the <span> elements we generate
  el.innerHTML = el.textContent.replace(/([^\s])/g, '<span data-animate>$1</span>');
  for (const span of el.querySelectorAll('span[data-animate]')) {
    span.classList.add('animate');
    await sleep(100);
  }
}

fadeInCharacters(document.querySelector('p'));

.animate {
  animation: appear 1s ease-in-out 1 forwards;
}

span {
  opacity: 0;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<p>Thank you for any help!</p>

If you want to wait for each character before fading in the next, then change the await function into something that hooks into the animationend event, although I am inclined to believe this is not what you intend. Just putting it out here for the sake of completeness:

function onAnimationEnd(el) {
  return new Promise(r => el.addEventListener('animationend', () => r()));
}

async function fadeInCharacters(el) {
  // NOTE: Use a custom data- attribute to ensure we only target the <span> elements we generate
  el.innerHTML = el.textContent.replace(/([^\s])/g, '<span data-animate>$1</span>');
  for (const span of el.querySelectorAll('span[data-animate]')) {
    span.classList.add('animate');
    await onAnimationEnd(span);
  }
}

fadeInCharacters(document.querySelector('p'));

.animate {
  animation: appear 1s ease-in-out 1 forwards;
}

span {
  opacity: 0;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<p>Thank you for any help!</p>

Thank you for providing me another idea by using async function. Curious what does the `replace(/([^\s])/g, '$1')` does and what is the regular expression? The white space? — James, Mar 01 '22 at 01:54

Simple appearing animation

2 Answers2