Setting the texts in the same line - html

Question

I have this HTML:
<div id="container">
<div id="content">
<h2 class="frame1">Loriam Ipisum</h2>
<h2 class="frame2">Loriam Ipisumsad</h2>
</div>
</div>
And this CSS:
body{margin: 0; padding: 0;}
#container{
width: 100%;
top: 200px;
border: 1px solid black;
text-align: center;
position: relative;
overflow: hidden;
}
#content{
width: 300px;
height: 50px;
border: 1px solid blue;
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#content h2{
position: relative;
display: inline-block;
}
#content h2.frame1{
-webkit-animation-delay: 0s;
-webkit-animation-name: efeito1;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
#content h2.frame2{
-webkit-animation-delay: 3s;
-webkit-animation-name: efeito1;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
#-webkit-keyframes efeito1{
0%{
left: 0;
opacity: 0;
}
50%{
opacity: 0.4;
left: 100px;
opacity: 0.4;
left: 200;
}
100%{
opacity: 0;
left: 300px;
opacity: 0.4;
}
}
What I want to do is: I want both .frames be at the same LINE. SO when I apply the animation, it will happen at the same place, giving a nice effect. I want them to be at the same line, at the same place but without one text be upon the other looking like a mess...
I tried to use the overflow: Hidden: but didn't work, the texts stays one above the other...
I want to apply, this effect: http://codepen.io/anon/pen/LcwKj/
Any suggestion? Thanks !

Answer 1

Is this effect what you are aiming for:
HTML
<div id="container">
<div id="content">
<h2 class="frame1">Loriam Ipisum</h2>
<h2 class="frame2">sad</h2>
</div>
</div>
CSS
body{margin: 0; padding: 0;}
#container{
width: 100%;
top: 200px;
border: 1px solid black;
text-align: center;
position: relative;
overflow: hidden;
}
#content{
width: 100%;
height: 50px;
border: 1px solid blue;
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#content h2{
position: absolute;
display: inline-block;
}
#content h2.frame1{
-webkit-animation-delay: 0s;
-webkit-animation-name: efeito1;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
opacity:0;
}
#content h2.frame2{
-webkit-animation-delay: 3s;
-webkit-animation-name: efeito1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
opacity:0;
position:absolute;
}
#-webkit-keyframes efeito1{
0%{
opacity: 0;
}
100%{
opacity: 100;
}
}