0

上から下に2つの数字を並べてアニメーション化する必要がありますが、うまくいきません。.f_circleG クラスで postion:absolute を作成すると、動作しますが、並べて表示されません。別の質問は、なぜ 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>
4

2 に答える 2

0

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-12T05:38:57.713 に答える