CSS过渡和动画同时激活

Question

http://jsfiddle.net/bryank/YPxb5/

#spacer{
 position:fixed;
    top:11px;
    left:200px;
height:79px;
width:155px;
background-color:#fff;

}
#spacer:active{
-webkit-animation: click .1s 1;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes click{
0%{-webkit-transform:scale(1,1);}
100%{-webkit-transform:scale(0.9,0.9);}
}

/*------begin nav------*/
#toggler { display: none; }
#nav{
    padding:0;
    position:fixed;
    top:11px;
    left:26px;
    font-family:helvetica;
    font-size:14px;
    background-image:url(logo_back.png);  
/*--  background-color:red;  --*/
    width:11.1em;
    height:5.7em;
    overflow:hidden;
    transition: height .4s;
    -webkit-transition: height .4s; 
}
input:checked + #nav{
    height:33em;
}
/*-- #nav a.bg:hover{
   background-color: rgba(0,0,0,0.0);

} --*/
#nav a{
   text-decoration:none;
   color:#000;   
}
#nav a:hover{
   background-color:#858585;

}
#nav div{
    text-indent:0.5em;
    line-height: 1.2em;
}

<!--img button-->
<div id="spacer"><a href="#"><img src="http://liveoilfree.com/wtrclrr/b&w_logo_m.jpeg"   height="79" width="155" /></a></div>

<!--drop down nav-->
<label for="toggler">
    <input id="toggler" type="checkbox">
<div id="nav">
    <!--logo_image-->

       <img src="http://liveoilfree.com/wtrclrr/b&w_logo_m.jpeg" height="79" width="155" />

    <!---->

        <div style="height:1em;"></div>
        <div style="font-size:1.1em;"><b>Artists</b></div>
        <div style="height:1em;"></div>
        <div><a href="#">Ahnnu</a></div>
        <div><a href="#">Cex</a></div>
        <div><a href="#">Co La</a></div>
        <div><a href="#">Delicate Steve</a></div>
        <div><a href="#">Dope Body</a></div>
        <div><a href="#">Dustin Wong</a></div>
        <div><a href="#">Eachothers</a></div>
        <div><a href="#">En Passant</a></div>
        <div><a href="#">Gem Vision</a></div>
        <div><a href="#">Holy Ghost Party</a></div>
        <div><a href="#">Jimmy Joe Roche</a></div>
        <div><a href="#">Jason Urick</a></div>
        <div><a href="#">Ken Seeno</a></div>
        <div><a href="#">Kid Krusher</a></div>
        <div><a href="#">Lil Jabba</a></div>
        <div><a href="#">Rick Rab</a></div>
        <div><a href="#">Teeth Mountain</a></div>
        <div><a href="#">Teenage Souls</a></div>
        <div style="height:1em;"></div>
        <div style="font-size:1.1em;"><a href="#">INFO</a></div>
</div>
</label>

在这里我的小提琴：http://jsfiddle.net/bryank/YPxb5/ 我有两个按钮，

左侧的按钮是一个使用过渡的下拉菜单（感谢 user:'squint' 在上一个问题中向我展示了隐藏的复选框解决方案。）按钮本身除了触发菜单之外什么都不做。

在右边的旁边，我有一个按钮，似乎可以在动画中使用比例向下点击

我希望右侧的按钮将菜单放在按钮的正下方。

我确信做到这一点的唯一方法是使用 javascript（尽管我经常对 CSS 的聪明之处感到惊讶）我最近咬紧牙关，决定从头开始学习 javascript...喜欢雄辩的 javascript到目前为止的超极本

有什么想法吗？ 谢谢

Answer 1

终于让它按我想要的方式工作了。（没有stackoverflow用户的帮助，再次感谢。）我确定jQuery有点脏但是......它可以工作。

http://jsfiddle.net/bryank/YPxb5/1/

$(document).ready(function(){
 $('#spacer').mousedown(function(){
      var val=.9
      $(this).css({'-webkit-transform':'scale('+val+')','-moz-    transform':'scale('+val+')'})
      .mouseup(function(){
           var val2=1
           $(this).css({'-webkit-transform':'scale('+val2+')','-moz-transform':'scale('+val2+')'})
      });         

     });
});

$(document).ready(function(){
      $('#spacer').mouseup(dropDown2)     
});

 function dropDown2(){
        $('#nav').toggleClass('navDrop');
  }