Как добиться анимации появления текста CSS на нескольких строках?

Question

Я пытаюсь реализовать анимацию появления текста с помощью CSS. У меня есть текст черного цвета, а затем, когда страница загружается, текст заполняется красным цветом в течение нескольких секунд.

Проблема, с которой я столкнулся, заключается в том, что анимация загрузки текста работает нормально, но когда текст заканчивается и начинается с новой строки, анимация текста все еще продолжается в той же строке.

Как я могу это исправить?

Мой код:

  body {
    background: #3498db;
    font-family: sans-serif;
    }
    h1 {
        position: relative;
        color: rgba(0, 0, 0, .3);
        font-size: 5em;
        white-space: wrap;
    }
    h1:before {
        content: attr(data-text);
        position: absolute;
        overflow: hidden;
        max-width: 100%;
        white-space: nowrap;
        word-break: break-all;
        color: #fff;
        animation: loading 8s linear;
    }
    @keyframes loading {
        0% {
            max-width: 0;
        }
    }

<h1 data-text="Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.">Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</h1>

_{Свободный перевод вопроса How can I achieve a CSS text loading animation over multiple lines? от участника @CJAY.}

Answer 1

Идея состоит в том, чтобы рассмотреть градиентную окраску с помощью встроенного элемента.
Просто обратите внимание на поддержку браузерами background-clip: text

body {
  background: #3498db;
  font-family: sans-serif;
}

h1 {
  font-size: 5em;
}

h1 span {
  background:
    linear-gradient(#fff,#fff) left no-repeat,
    rgba(0, 0, 0, .3);
  background-size:0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation:loading 5s forwards linear;
}

@keyframes loading {
  100% {
    background-size:100% 100%;
  }
}

<h1><span>Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</span></h1>

Чтобы лучше понять, как это работает, вот базовый пример, где вы можете увидеть, как встроенный элемент ведет себя с окраской фона и чем он отличается от элемента уровня блока:

.color {
  font-size: 1.5em;
  line-height: 1.5em;
  border: 2px solid;
  background: linear-gradient(red, red) left no-repeat;
  background-size: 0% 100%;
  animation: change 5s linear forwards;
}

@keyframes change {
  100% {
    background-size: 100% 100%
  }
}

<span class="color">
 lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume 
</span>
<div class="color">
  lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</div>

Я просто применяю ту же логику, используя background-clip: text для раскрашивания текста вместо фона:

.color {
  font-size: 1.5em;
  line-height: 1.5em;
  border: 2px solid;
  background: linear-gradient(red, red) left no-repeat;
  background-size: 0% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: change 5s linear forwards;
}

@keyframes change {
  100% {
    background-size: 100% 100%
  }
}

<span class="color">
 lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume 
</span>
<div class="color">
  lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</div>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Как добиться анимации появления текста CSS на нескольких строках?

Ответы (1 шт):