Make a smooth transition to items inside a container-CodePudding

I would like to bring "Hello world" inside a white container from left to right but I don't want the container to move.

Need to move just text and the text flashes from left to right like a quick slider movement pleasing to the eye.

How to achieve this using CSS animation?

body {
  background: red
}

.container {
  background: white;
  color: black;
  padding: 20px;
  margin: 20px;
}

<div >
  <h1>Hello world</h1>
</div>

CodePudding user response：

for making the animation use @keyframes

and for making the text not visible if outside use overflow

forwards for saving the last keyframes of animation.

body {
  background: red
}

.container {
  background: white;
  color: black;
  padding: 20px;
  margin: 20px;
}

.container {
  overflow: auto;
}

h1 {
  animation: toRight 0.2s ease-in forwards;
  transform: translateX(-50%);
}

@keyframes toRight {
  100% {
    transform: translateX(0);
  }
}

<div >
  <h1>Hello world</h1>
</div>