我需要两个数字并排动画从上到下，为什么需要位置：绝对动画答案

【问题标题】：I need two number side by side animate top to bottom and why need postions:absolute with animation我需要两个数字并排动画从上到下，为什么需要位置：绝对动画
【发布时间】：2013-04-12 16:30:50
【问题描述】：

我需要两个数字并排动画从上到下但它不起作用。如果我在 .f_circleG 类中定位：绝对，它的工作但不是并排的。另一个问题是为什么需要postions：absolute with animation。下面是我的HTML和CSS代码。

<style type='text/css'>

  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%; }
}

</style>

</head>
<body>    
<div id="floatingCirclesG">
    <ul>
        <li  class="f_circleG">1</li>
        <li  class="f_circleG">2</li>
    </ul>
</div>

</body>

【问题讨论】：

标签： html css css-animations

【解决方案1】：

http://jsfiddle.net/teZdz/

希望这能解决您的问题

html

<div id="floatingCirclesG">
    <ul>
      <li class="f_circleG">1</li>
      <li class="f_circleG">2</li>
    </ul>
  </div>

css

ul, ul li { list-style: none; display: inline; }

#floatingCirclesG { height: 200px; }

.f_circleG { position: relative; display: inline-block; -webkit-animation: f_fadeG 1.00s infinite; }

@-webkit-keyframes f_fadeG { 
0% {top:0px;}
100% {top:100%;}
}

【讨论】：

感谢 ans 但即使在你的 jsfiddle 中动画也不起作用
对不起，我的 mistek 发布了错误的 URL，现在在 CHROME 中的 URL 下方查看 jsfiddle.net/teZdz

【解决方案2】：

职位：绝对的

元素相对于它的第一个定位（非静态）祖先元素定位

试试这个代码

<ul>
<li  class="f_circleG">1</li>&ensp;&ensp;&ensp;&ensp;&ensp;
<li  class="f_circleG">2</li>
</ul>

如果你不添加 position:absolute 在动画中，列表项与这里列表的祖先相比变得静态，因此动画将不起作用。

【讨论】：

Thnx 但不想要这样，因为我有更多的数字，所以如果可以通过 css 即margin 或 padding 来实现？