title: CSS 3 Animation (Text from Top to bottom)
body: <p>I am trying to make animation similar to marquee using "animation" and "keyframes" in CSS. </p>
  
  <p>I was trying to move text from to bottom. But, as the text moves from top once, it starts to move from top again only after when whole text reaches at bottom. I wanted to have this continuous. </p>
  
  <p>Please help.</p>
  
  <p><strong>Code</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes movingTopToBottom {
    0% {
      top: 50px;
    }
    100% {
      top: 90px;
    }
  }
  #divTAReviews {
    animation: movingTopToBottom 3s ease infinite;
    -webkit-animation: movingTopToBottom ease 3s infinite;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="divTAReviews"&gt;
      &lt;div&gt;
        &lt;p class="styling" style="background-color:lightblue;"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;p class="styling" style="background-color:lightgreen;opacity:0.3"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;p class="styling" style="background-color:palevioletred;opacity:0.3"&gt;.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;p class="styling" style="background-color:orchid;opacity:0.2"&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>