title: CSS marquee, how can I make the text move from bottom to top
body: <p>I have made the marquee completely using <code>css</code>. Here is the <a href="http://jsfiddle.net/vn2Vu/6/" rel="nofollow">jsfiddle</a> of it. But I want the text to move from bottom to up. Currently  it is moving left to right. How can I make it move from bottom to up ?</p>
  
  <p><em>CSS</em></p>
  
  <pre><code>/* define the animation */
  @-webkit-keyframes marquee {
    0%   { -webkit-transform: translate(0, 0); }
    100% { -webkit-transform: translate(-100%, 0); }
  } 
  
  @-moz-keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
  }
  
  /* define your limiting container */
  .marquee {
    border: solid 2px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
  }
  /* this is the tray moving around your container */
  .marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 15s linear infinite; /* here you select the animation */
    -webkit-animation: marquee 15s linear infinite; /* here you select the animation */
  }
  /* pause the animation on mouse over */
  .marquee span:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
  }
  </code></pre>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;p class="marquee"&gt;
      &lt;span&gt;
          Hey! What's up? &lt;br /&gt;
          Second Line &lt;br /&gt;
          Third Line &lt;br /&gt;
          Fourth Line &lt;br /&gt;
          Fifth Line &lt;br /    
      &lt;/span&gt;
  </code></pre>
  
  <p></p></p>