web-dev-qa-db-fra.com

Comment puis-je réaliser une animation de chargement de texte CSS sur plusieurs lignes?

J'essaie d'implémenter une animation de chargement de texte avec CSS. ce que j'ai est un texte de couleur noire, puis lorsque la page se charge, le texte se remplit commence à se remplir d'une couleur rouge pendant plusieurs secondes.

Le problème auquel je suis confronté est que l'animation de chargement de texte fonctionne correctement, mais lorsque le texte se termine et commence par une nouvelle ligne, le texte d'animation continue toujours sur la même ligne.

Comment puis-je réparer cela?

enter image description here

code:

    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>
htmlcsscss3css-animations
31
Chandan Raikar

Une idée est de considérer la coloration du gradient avec un élément en ligne . Faites simplement attention à support du navigateur of 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>

Pour mieux comprendre comment cela fonctionne, voici un exemple de base où vous pouvez voir comment l'élément inline se comporte avec la coloration d'arrière-plan et en quoi il diffère de l'élément de niveau bloc:

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

J'applique simplement la même logique en utilisant background-clip:text pour colorer le texte au lieu de l'arrière-plan:

.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>
32
Temani Afif