Q:

css transition stopped working - was working two days ago

This could be something extremely obvious, but I'm lost. Was working fine days ago - no code change.
I have a container div that drops down when a class is toggled with jquery, I'm trying to get its transition for going up and down to work again. 
The class I toggle only changes height width and position. Any negative values are to close small gaps with other divs on the page.

  $(".me").click(function() {

   if ( $("#ballHolder").hasClass("shown") ) {
      $("#ballHolder").removeClass("shown");
   } else {

     $( "#ballHolder" ).addClass( "shown" );
   }
      $(".foo").fadeToggle("fast");
    // note I am new to JS and JQ //
  });
.shown {
  top: -30px; !important
  height: 300px; !important
  width: 380px; !important
  -webkit-transition: all,400ms,ease-in-out;
  -moz-transition: all,400ms,ease-in-out;
  -ms-transition: all,400ms,ease-in-out;
  -o-transition: all,400ms,ease-in-out;
  transition: all,400ms,ease-in-out;
}
#ballHolder {
  max-width: 480px !important
  height: 105px;
  width: 150px;
  display: block;
  position: absolute;
  margin: 0 auto;
  top: -1px;
  right: 0;
  bottom: auto;
  left: 0;
  
  -webkit-transition: all,400ms,ease-in-out;
  -moz-transition: all,400ms,ease-in-out;
  -ms-transition: all,400ms,ease-in-out;
  -o-transition: all,400ms,ease-in-out;
  transition: all,400ms,ease-in-out;

  @include abs-pos($top: -1px, $right: 0, $left: 0)
  @include transition(all, 400ms, ease-in-out)

  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  
  background-color: grey;
  overflow: hidden;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


  <div class="profile">
    <div class="me"> 

      <div id="ballHolder">
        <!-- there are items in here, code for them works fine -->
          
    </div>
  </div>

A:

No commas in the Transition, thank you Toby.

