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/我有兩個按鈕，

左邊按鈕是一個下拉使用過渡菜單（感謝用戶：'squint'用於顯示前一個問題中隱藏的複選框解決方案。）按鈕本身除了觸發菜單外什麼也不做。

和旁邊的我，似乎點擊下使用規模的動畫

我想右邊的按鈕，直接將菜單按鈕的下方的按鈕的右側。

我確定唯一能做到這一點的方法是使用javascript（雖然我一直對CSS聰明有驚訝）我最近咬了子彈，決定從頭開始學習JavaScript ......喜歡雄辯javascript hyperbook至今

有什麼想法？ thx

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'); 
    }