html - CSS -transition プロパティの動作を変更する

Question

Webページをアニメーション化するために、CSSトランジションプロパティを使用しています。基本的に私がこれまでに得たものは次のとおりです: 私がホームページにいて (class="content"のみ )、「自己紹介」リンク ( class="secondary") をクリックすると、自己紹介ページは良い方法で偽りますが、別のリンクに移動するとclass="secondary"、 「自己紹介」ページが最初に表示され、別のページが表示されなくなります。そして、私はこの振る舞いを望んでいません。class="secondary"前のページの前に false だけの別のページが必要です。

私は http://jsfiddle.net/FMRBf/2で最善を尽くそうとしていました

HTML

 <li><a href="#home" id="nav-home">Home</a></li>
 <li><a href="#another-page" id="nav-portfolio">Portfolio</a></li>
 <li><a href="#about" id="nav-about">About Me</a></li>
</br>
<div id="home" class="content">
   <h2>Home</h2>
</div>

<div id="about" class="secondary">
   <div class="content">
    <h2>About Me</h2>
   </div>
</div>

<div id="another-page" class="secondary">
   <div class="content">
    <h2>Another Secondary Page</h2>
   </div>
</div>

CSS

.content {
  background-color: rgba(255,233,0,0.8);
  height: 100%;
  margin-top: 5%;
}

.secondary {
    min-width: 100%;
    height: 98%;
    background: #000;
    position: absolute;
    z-index: 2;
    overflow-y: auto; 
    overflow-x: hidden; 
    margin-top: -100%;

  -webkit-transition: all .8s ease-in;
    -moz-transition: all .8s ease-in;
    -o-transition: all .8s ease-in;
    transition: all .8s ease-in;
}
.secondary:target {
    margin-top: 0px;
    background-color: rgba(255,233,0,1);
}