我需要兩個數字並排動畫從上到下，爲什麼需要位置：絕對與動畫

我需要兩個數字並排動畫從頂部到底部但它不工作。如果我讓位置：絕對在.f_circleG類的工作，但不是並排。另一個問題是爲什麼需要postions：absolute with animation.Below是我的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>

來源

2013-04-11 Nilesh

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

來源

2013-04-12 05:38:57

Thanx for ans，但動畫不工作，即使在你的jsfiddle – Nilesh 2013-04-12 05:54:40

對不起，我mistek發佈錯誤的網址 CHK它現在在CHROME的URL下面 http://jsfiddle.net/teZdz/ – 2013-04-12 08:31:18

位置：absoulte

如果不添加位置

元素相對於它的第一個定位的（而不是靜態）的祖先元素

定位試試這個代碼

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

：絕對在動畫中，列表項與此處的列表的祖先相比變得靜止，因此動畫將不起作用。

來源

2013-04-11 07:02:24

日Thnx但不想這樣，因爲我有更多的數字，所以如果可能通過CSS即marigin或填充？ – Nilesh 2013-04-11 07:14:12

我需要兩個數字並排動畫從上到下，爲什麼需要位置：絕對與動畫

回答

相關問題