Scrolling text - intems are display in the same time - html

Question

I'm trying to write move/scroll text.
So finally I have this.
CODEPEN
There is a problem as you can see. The problem with diplay in the same time two text inside p tags. I want to display the 1st one and then should be show the 2nd one.
I was trying to change values of this
#-moz-keyframes left-one {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes left-one {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes left-one {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
I mean 0% to 50% but it's not good.
How I can solve it?

Answer 1

The whole picture of the animation you want to show is 30s long, not 15s. Each individual animation is 15s on the screen, but the whole animation is 30s if you account for the time of the first animation + the time of the second animation, so they don't overlap.
So change the animation time of both to 30s, and do the first animation in the first 15s (0-50%), and do the second animation in the last 15s (50-100%)
.movetext {
width: 100%;
height: 50px;
overflow: hidden;
position: relative;
background-color: black;
}
.movetext p {
position: absolute;
font-family: Verdana, Arial;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
color: yellow;
font-weight: bold;
font-size: 20px;
transform: translateX(100%);
}
.movetext p:nth-child(1) {
animation: left-one 30s linear infinite;
}
.movetext p:nth-child(2) {
animation: left-two 30s linear infinite;
}
#keyframes left-one {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}
#keyframes left-two {
50% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
<div class="container">
<div class="movetext">
<p>Something is here.</p>
<p>But maybe something will be here.</P>
</div>
</div>

Answer 2

Thanks man. It's working very well. :)
I saw there is a little problem on mobile view. The all text is not display properly. It's just cut off. For the other resolutions (>768) everything is good.
So how about this. How I can handle it?
EDIT
I saw the problem. P tag set width of class. I know I can set witdh eg. 700px but I would like to p tag set width of width text.