动画元素的水平

Question

我正在尝试使用jQuery创建一个非常简单和简短的动画。

有一个由父母和孩子组成的关键词列表。 动画应该显示第一级元素，然后是第二级和第三级。

有人告诉我这里也有CSS3解决方案，我不知道要走哪条路......有什么想法吗？

感谢..

更新：

此时我只有这样的事情：

<style>
.first {float:left; width:168px; height:68px; background:blue; position:absolute; }
.second {float:left; width:120px; height:32px; background:blue; position:absolute; }
.third {float:left; width:90px; height:26px; background:blue; position:absolute; }
.fourth {float:left; width:auto; height:20px; background:blue; position:absolute; }

.alfa {float: left; width:168px; height:68px; background:blue;}
.beta {float:left; width:120px; height:32px; background:blue; }
.omega {float:left; width:90px; height:26px; background:blue;  }
.orion {float:left; width:auto; height:20px; background:blue;  }

.positiona { margin-left:330px; margin-top:20px; }
.positionb { margin-left:180px; margin-top:50px; }
.positionc { margin-left:280px; margin-top:110px; }
.positiond { margin-left:140px; margin-top:100px; }
.positione { margin-left:180px; margin-top:160px; }
.positionf { margin-left:20px; margin-top:105px; }
.positiong { margin-left:60px; margin-top:140px; }

.positionz { margin-left:0px; margin-top:20px; }
.positionx { margin-left:20px; margin-top:50px; }
.positionv { margin-left:-190px; margin-top:110px; }
.positionn { margin-left:-40px; margin-top:100px; }
.positionm { margin-left:-110px; margin-top:160px; }
.positionl { margin-left:40px; margin-top:105px; }
.positionk { margin-left:20px; margin-top:20px; }
</style>

        <div style="width:505px; float:left;">
            <div class="first positiona">agenius</div>

            <div class="second positionb">echilibru</div>
            <div class="second positionc">planificare</div>

            <div class="third positiond">evolutie</div>
            <div class="third positione">actiune</div>

            <div class="fourth positionf">monitorizare</div>
            <div class="fourth positiong">concepte</div>
        </div>
            <!-- +++++++++++++++++++++ --> 
        <div style="width:505px; float:right;">            
            <div class="alfa positionz">agenius</div>

            <div class="beta positionx">echilibru</div>
            <div class="beta positionv">planificare</div>

            <div class="omega positionn">evolutie</div>
            <div class="omega positionm">actiune</div>

            <div class="orion positionl">monitorizare</div>
            <div class="orion positionk">concepte</div>
        </div>

它看起来像这样：

Answer 1

这是一个如何淡入CSS3 ...

的简单示例

http://codepen.io/jcreamer898/pen/Dpdlv

scss（带指南针的sass）是......

.first, .second, .third {
  width: 100px;
  height: 100px;
  @include transition(all 1s ease-in-out);
  opacity: 0;
  border: 1px solid black;
  display:inline-block;
}

.first {
  @include transition-delay(.5s);
  background-color: red;
}

.second {
  @include transition-delay(2s);
  background-color: blue;
}

.third {
  @include transition-delay(3.5s);
  background-color: green;
}

.animate {
  div {
    opacity: 1;
  }
}

第一，第二和第三类都以0不透明度开始。 transition all 1s ease-in-out基本上意味着当任何属性发生更改时，请确保每个div上的更改. Then when an动画class is added to the wrapping div, the opacity will change to 1 for all of the divs. The转换延迟`需要1秒钟才能完成改变每个群体消失的时间点。

标记结构为......

<div id="animation">
  <div class="first"></div>
  <div class="first"></div>

  <div class="second"></div>
  <div class="second"></div>

  <div class="third"></div>
  <div class="third"></div>
</div>

然后用一点JS启动动画，瞧！

document.getElementById('animation').className = 'animate';