Setting the texts in the same line

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;
    }
}