bounce search field

_src/assets/js/app.js

@@ -35,7 +35,7 @@ var siteNavigation = {
             });
 
             // show search
-            $searcharea.addClass('ready');
+            $searcharea.removeClass('ready bounceOutUp').addClass('ready bounceInDown');
             $searchfield.focus();
             if ( $searchfield.val().length ) {
                 $searchpop.removeClass('hide');
@@ -48,7 +48,7 @@ var siteNavigation = {
 
             // bind the hide controls
             $(document).bind('click.hidethepop', function() {
-                $searcharea.removeClass('ready');
+                $searcharea.removeClass('bounceInDown');
                 $searchpop.addClass('hide');
 
                 // unbind the hide controls
@@ -78,7 +78,7 @@ var siteNavigation = {
             e.preventDefault();
 
             // hide search area
-            $searcharea.removeClass('ready');
+            $searcharea.removeClass('bounceInDown').addClass('bounceOutUp');
             $searchpop.addClass('hide');
 
             // empty search field

_src/assets/styl/animations.styl

@@ -42,3 +42,48 @@ gpuacceleration()
         opacity: 1
     100%
         opacity: 0
+
+//
+// Bounce
+//
+// taken and adapted from
+// http://daneden.github.io/animate.css/
+////////////////////////////////////
+
+// Down
+@keyframes bounceInDown
+    0%, 60%, 75%, 90%, 100%
+        // http://cubic-bezier.com/#.06,.85,.54,1.39
+        transition-timing-function: cubic-bezier(.06,.85,.54,1)
+
+    0%
+        transform: translate3d(0, -100px, 0)
+
+    60%
+        transform: translate3d(0, 20px, 0)
+
+    75%
+        transform: translate3d(0, -10px, 0)
+
+    90%
+        transform: translate3d(0, 5px, 0)
+
+    100%
+        transform: none
+
+.bounceInDown
+    animation: bounceInDown .4s both
+
+// Up
+@keyframes bounceOutUp
+    20%
+        transform: translate3d(0, -10px, 0)
+
+    40%, 45%
+        transform: translate3d(0, 20px, 0)
+
+    100%
+        transform: translate3d(0, -100px, 0)
+
+.bounceOutUp
+    animation: bounceOutUp .5s both

_src/assets/styl/search.styl

@@ -33,10 +33,10 @@
     z-index: 3
 
     // hidden by default
-    transform: translate(0, -70px)
+    display: none
 
     &.ready
-        transform: translate(0, 0)
+        display: block
 
 .search-results
     @extend .clearfix