html - texto - efectos de transicion de imagenes css

¿Cómo puedo lograr una animación de carga de texto CSS en varias líneas?

Question

Estoy tratando de implementar una animación de carga de texto con CSS . lo que tengo es un texto con color negro, luego, cuando se cargue la página, el texto se llenará, comience a llenarse con un color rojo durante varios segundos.

El problema al que me estoy enfrentando es que la animación de carga de texto funciona bien, pero cuando el texto termina y comienza con una nueva línea, el texto de la animación continúa en la misma línea.

¿Cómo puedo arreglar esto?

código:

    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>

Answer 1

Una idea es considerar la coloración degradada con un elemento en línea . Simplemente preste atención al soporte del navegador de 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>

Para entender mejor cómo funciona, este es un ejemplo básico donde puede ver cómo se comporta el elemento en línea con la coloración de fondo y en qué se diferencia del elemento a nivel de bloque:

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

Simplemente aplico la misma lógica usando background-clip:text para colorear el texto en lugar del fondo:

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