animation text #keyframes onload salidein - css

Question

Need help please !
I need to slide in the whole div texte1 without moving what is inside (h2 and p).
I try to use a mask animation on the div but it didn't work.
any suggestions please !
<div class="container">
<div class="texte1">
<h2>This is a title</h2>
<p> This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation</p>
</div>
</div>
.container {
border:1px solid red;
width:800px;
height:200px;
}
.texte1 {
animation: slidein 1s ease-in;
animation-fill-mode: forwards;
overflow:hidden;
border:1px solid green;
}
#keyframes slidein {
from {
width: 0px;
}
to {
width: 100%;
}
}
https://jsfiddle.net/Lounahlem/vb8p23qu/1/

Answer 1

The code given takes the width from zero. This means the included text moves in the sense of being initially on several lines with word wrapping and ends up on fewer lines as the element widens.
This snippet instead translates the whole element - initially completely off screen to the left and then brings it in by having the final translation as 0.
.container {
border: 1px solid red;
width: 800px;
height: 200px;
}
.texte1 {
animation: slidein 1s ease-in;
animation-fill-mode: forwards;
overflow: hidden;
border: 1px solid green;
}
#keyframes slidein {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
<div class="container">
<div class="texte1">
<h2>This is a title</h2>
<p> This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation This is a simple text animation</p>
</div>
</div>