Question 45049 in Html Question posted in
Some basic documentation can be found here.

fill text color effect – Html

I’m trying to do fill color effect on text but it doesn’t work , the animation doesn’t apply on third line

how can I solve this?

.text-container p {
  -webkit-text-stroke     : 0.5px #725c55;
  color                   : transparent;
  background-image        : linear-gradient(#725c55, #725c55);
  background-repeat       : no-repeat;
  -webkit-background-clip : text;
  /* animation            : backcolor 5s linear; */
  background-position     : 700px 0;
  }
@keyframes backcolor {
  100% { background-position : 0 0; }
  }
.text-container p:nth-child(1) {
  animation       : backcolor 5s linear;
  animation-delay : 5s;
  }
.text-container p:nth-child(2) {
  animation       : backcolor 5s linear;
  animation-delay : 1s;
  }
.text-container p:nth-child(3) {
  animation       : backcolor 5s linear;
  animation-delay : 5s;
  }
<div class="text-container">
  <p>First line in essay</p>
  <p>Second line in essay</p>
  <p>Third line in essay</p>
</div>
Tags:

2

Answers


  1. 0

    Try this to decrease the delay:

    .text-container p {
  -webkit-text-stroke     : 0.5px #725c55;
  color                   : transparent;
  background-image        : linear-gradient(#725c55, #725c55);
  background-repeat       : no-repeat;
  -webkit-background-clip : text;
  /* animation            : backcolor 5s linear; */
  background-position     : 700px 0;
  }
@keyframes backcolor {
  100% { background-position : 0 0; }
  }
.text-container p:nth-child(1) {
  animation       : backcolor 3s linear;
  animation-delay : 2s;
  }
.text-container p:nth-child(2) {
  animation       : backcolor 3s linear;
  animation-delay : 1s;
  }
.text-container p:nth-child(3) {
  animation       : backcolor 3s linear;
  animation-delay : 2s;
  }
    <div class="text-container">
  <p>First line in essay</p>
  <p>Second line in essay</p>
  <p>Third line in essay</p>
</div>
    Login or Signup to reply.
  2. 0

    Apparently, your code works fine with animations, maybe you should unify the animation delay for the three texts and decrease the wait a little:

    .text-container p {
  -webkit-text-stroke     : 0.5px #725c55;
  color                   : transparent;
  background-image        : linear-gradient(#725c55, #725c55);
  background-repeat       : no-repeat;
  -webkit-background-clip : text;
  /* animation            : backcolor 5s linear; */
  background-position     : 700px 0;
  }
@keyframes backcolor {
  100% { background-position : 0 0; }
  }
.text-container p:nth-child(1) {
  animation       : backcolor 2s linear;
  animation-delay : 1s;
  }
.text-container p:nth-child(2) {
  animation       : backcolor 2s linear;
  animation-delay : 1s;
  }
.text-container p:nth-child(3) {
  animation       : backcolor 2s linear;
  animation-delay : 1s;
  }
    <div class="text-container">
  <p>First line in essay</p>
  <p>Second line in essay</p>
  <p>Third line in essay</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search