css change content with animation on hover

Question

this is possible to create an animation when I hover a text but this is complexe for me.

When hover I want the second part of the text shifts to the right and lets appear the first part of the text below it

Here Everybody let appears Hello bellow himself.

I try to make something like that but the new content appears directly :

#texte::after{
    content: "H.Everybody";
}

#texte:hover:after{
    content:'Hello Everybody';
}

<h1 id="texte"></h1>

Answer 1

Use the “animate” property:

#texte::after {
  content: 'H.Everybody';
}
#texte:not(:hover)::after {
  content: 'H.Everybody' !important;
  transition: 0.5s;
}
#texte:hover::after {
  animation: textanimate 0.5s linear;
  content: 'Hello Everybody';
}
@keyframes textanimate {
  0% {
    content: 'H.Everybody';
  }
  20% {
    content: 'He.Everybody';
  }
  40% {
    content: 'Hel.Everybody';
  }
  60% {
    content: 'Hell.Everybody';
  }
  80% {
    content: 'Hello.Everybody';
  }
  100% {
    content: 'Hello Everybody';
  }
}

<h1 id="texte"></h1>