title: I need two number side by side animate top to bottom and why need postions:absolute with animation
body: <p>I need two number side by side animate top to bottom But its not working. If i make postion:absolute in .f_circleG class its working but not side by side. Another question is why need postions:absolute with animation.Below is my HTML and CSS code.</p>
  
  <pre><code>&lt;style type='text/css'&gt;
  
    ul, ul li { list-style:none; display:inline; }
  
   .f_circleG{
    position:absolute;
    background-color:#FFF;
    animation:f_fadeG 1.00s infinite;
   }
  
  @-moz-keyframes f_fadeG {
     0%{ background-color:transparent; top:0px;}
     100%{ background-color:transparent; top:100%; }
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;    
  &lt;div id="floatingCirclesG"&gt;
      &lt;ul&gt;
          &lt;li  class="f_circleG"&gt;1&lt;/li&gt;
          &lt;li  class="f_circleG"&gt;2&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>