javascript - CSS transition & animation to active at same time -

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> 

in fiddle here: http://jsfiddle.net/bryank/ypxb5/ have 2 buttons,

button on left drop down menu using transition (thanks user:'squint' showing me hidden checkbox solution in previous question.) button nothing trigger menu.

and next on right have button appears click down using scale in animation

i want button on right drop menu directly underneath of button.

i way javascript (though surprised css cleverness out there) have bitten bullet , decided learn javascript ground up...love eloquent javascript hyperbook far

any ideas? thx

finally got work how wanted.(not without stackoverflow users, again.) im sure jquery little dirty but...it works.

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