title: Slide in text on banner css animation
body: <p>I want to <code>translateX</code> text on the banner from left to right. I have taken a reference to animation from this site <a href="https://pereiraodell.com/" rel="nofollow noreferrer">https://pereiraodell.com/</a></p>
  <p>They are using jQuery/javaScript for animation. The same effect I want to have using CSS.</p>
  <p>I am trying to replica same effect using CSS but mine was not as smooth as given in the reference.</p>
  <p>In the referenced site, the text animation speed is gradually slowing down and the opacity setting works perfectly. I am not able to produce the same effect in my code. Maybe I am missing some breakpoints in keyframes. <a href="http://jsfiddle.net/5vax1uce/22/" rel="nofollow noreferrer">fiddle</a></p>
  <p>I want to show this animation on hover so that when the user hovers out, the text should go back to its original place in the animation.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.banner{
    width:500px;
    height:300px;
    background-color:green;
    border-radius:4px;
    overflow:hidden;
    padding-left:20px
  }
  
  .content{
    width:200px
  }
  
  .title{
    transform:translateX(-1000px);
    font-size:20px;
    color:#fff;
    padding-top:10px
  }
  .description{
    transform:translateX(-1000px);
    font-size:20px;
    color:#fff;
    padding-top:10px
  }
  
  .banner:hover .title{
    animation: slideInRight 1s;
    animation-fill-mode:forwards
  }
  
  .banner:hover .description{
    animation: slideInRight 1s 80ms;
    animation-fill-mode:forwards
  }
  
  @keyframes slideInRight {
    0% {
      transform: translateX(-100px);
      opacity: 0;
    }
    50%{
      opacity: 0.2;
    }
    80%{
      opacity: 0.6;
    }
    100% {
      transform: translateX(0);
      opacity: 1
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="banner"&gt;
  &lt;div class="content"&gt;
  &lt;div class="title"&gt;
    I am Title
  &lt;/div&gt;
  &lt;div class="description"&gt;
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>