I want to make text animation like this slide in from left. There are three text fields Sports Cargo Bag $14 Sale $25

I want these text to be set from jquery and slide in from the left like this link. This is my code JsFiddle

html

 <div id="mainContainer">

    <div id="logdo">
     <img  src="http://i.share.pho.to/7346a9ca_o.gif"/>
    </div>
         <div id="images">
        <img id="introImg" src="http://i.share.pho.to/9064dfe4_o.jpeg"/></div>
    <div id="headlineText">
        <p id="headline1Txt" ></p>
        <p id="headline2Txt" ></p>
   <p id="headline3Txt" ></p>


    </div>

    <button class="btn btn-primary" id="ctaBtn" type="button">SHOP NOW</button>

        </div>

css

* {
    margin:0;
    padding:0;

}



#mainContainer{ text-align: center;
width:160px;
    height:600px;
 box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
    border:5px solid #BACAE4;

    overflow: hidden;
    position: fixed;

}

#images{
    position:absolute;
    top:200px;
    left:3px;
    right:1286px;
    Width:130px;
    height:152px;

}
#introImg{
    position:absolute;
    top:40px;
    left:7px;
    right:11px;

}
#headlineText p
{
    text-align: center;
    position: absolute;
   top:60px;
    left:-120px; 
Width:120px;
    height:269px;
 line-height:1.0;
    overflow:hidden;

}

#ctaBtn{
        position:absolute;
    top:540px;
    left:26px;
    right:0px;
    Width:106px;
    height:28px;

}