How to make text transition with css and react?

Question

I'm trying to make a text transition with CSS where the texts should be alternating, should appear slowly, disappear and change text. And this should be infinite.

I'm trying to do the following, but the speed at which the text appears is not the same as it makes it appear, so it's giving a strange effect.

This is the code:

#hello {
  animation: pulse 6s linear infinite;
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#hello:after {
  content: '';
  animation: spin 50s linear infinite;
}

@keyframes spin {
  0% {
    content: 'This is the first text';
  }
  25% {
    content: 'The second text';
  }
  50% {
    content: 'Other text';
  }
  75% {
    content: 'Another example text';
  }
  100% {
    content: 'This is the last text';
  }
}

How can I make this transition work correctly? I'm having a little trouble with this, thanks if anyone can help me

Yasser CHENIK · Answer 1 · 2022-09-13T09:48:34.787

You need to do 2 things here:

Last content must be set at 80% instead of 100%, because you want this to repeat infinitely you need to let the last text take the same time that other contents used
You need to start the animations simultaneously using according to this, here is an example:

#hello {
  animation: pulse 2s linear infinite;
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#hello:after {
  content: '';  
  animation: spin 10s linear infinite 1s;// add this 1s
}

@keyframes spin {
  0% {
    content: 'This is the first text';
  }
  20% {
    content: 'The second text';
  }
  40% {
    content: 'Other text';
  }
  60% {
    content: 'Another example text';
  }
  80% {
    content: 'This is the last text';
  }
  100% {
    content: 'This is the last text';//must be same as 80% !!
  }
}

<div id="hello">
</div>

I tested this a lot but i m still not convinced that this is the proper way to do it, because nothing guarantees that they would start at the same time … It works perfectly in brave & chrome (where i tried it), but please look for a more strait way to do it ! Using something like this.

Also you can see here is what that 1 second delay do, if you inspect the code and go to animations tab in Dev-tools you will see this:

The added delay fixed the problem.
Note : the unites i used are precise and if you lower any second you would have to add a point … and it depends on the number of contents you want to display

How to make text transition with css and react?

1 Answers1