animate text

by lemon kazi

HTML

<ul class="offer">
<li><p> We offer:</p><p class="css">Item 1</p><p> at low cost prices</p></li>
<li><p> We offer:</p><p class="css">Item 1</p><p> at low cost prices</p></li>
 <li><p> We offer:</p><p class="css">Item 1</p> <p>at low cost prices</p></li>
</ul>

CSS

.offer{
        width: 100%;
    display: block;
    float: left;
    list-style:none;
}
li {
    float: left;
    width: 100%;
}
p {
    float: left;
}
.css {
    width: 46px;
    /* float: left; */
    white-space: nowrap;
    overflow: hidden;
    -moz-animation-duration: 5s;
    -webkit-animation-duration: 5s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
}

@-moz-keyframes slidein {
  from {
    
    width:1px;
  }
  
  to {
    
    width:46px;
  }
}

@-webkit-keyframes slidein {
  from {
   
    width:1px;
  }
  
  to {
    
    width:46px;
  }
}