diff --git a/htroot/js/yacysort.js b/htroot/js/yacysort.js
index 6f2af70c4..3b18b4a03 100644
--- a/htroot/js/yacysort.js
+++ b/htroot/js/yacysort.js
@@ -12,7 +12,7 @@ var displayPage = function() {
   $("#resultscontainer").find(".searchresults.earlierpage").each( function(i) {
     // Hide the item
     $(this).removeClass("currentpage");
-    $(this).hide(1000);
+    $(this).css('animation', '1s 1 forwards hide');
   });
 
   // For every search item from a current or later page...
@@ -20,11 +20,12 @@ var displayPage = function() {
     // If we now have too many results, hide the lowest-ranking ones.
     if (i >= requestedResults) {
       $(this).removeClass("currentpage");
-      $(this).hide(1000);
+      $(this).css('animation', '1s 1 forwards hide');
     }
     else {
       $(this).addClass("currentpage");
-      $(this).show(1000);
+      $(this).css('display', '');
+      $(this).css('animation', '1s 1 forwards show');
     }
   });
 
diff --git a/htroot/yacysearch.html b/htroot/yacysearch.html
index 82aff1d50..1e2d1ffe6 100644
--- a/htroot/yacysearch.html
+++ b/htroot/yacysearch.html
@@ -19,6 +19,7 @@
     var theLocalQuery = #[localQuery]#;
   </script>
   <script type="text/javascript" src="js/yacysort.js"></script>
+  <link rel="stylesheet" type="text/css" media="screen" href="yacysort.css" />
   #(/jsResort)#
   <script type="text/javascript">
      var suggestMatcher = function() {
diff --git a/htroot/yacysort.css b/htroot/yacysort.css
new file mode 100644
index 000000000..e179f5c6e
--- /dev/null
+++ b/htroot/yacysort.css
@@ -0,0 +1,42 @@
+@keyframes show {
+    0% {
+      transform: scale(0);
+      max-height: 0;
+      opacity: 0;
+      display: hidden;
+      padding-top: 0;
+    }
+    50% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      max-height: 500px;
+      display: block;
+      padding-top: 1em;
+    }
+}
+
+@keyframes hide {
+    0% {
+      max-height: 500px;
+      display: block;
+      padding-top: 1em;
+    }
+    50% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(0);
+      max-height: 0;
+      opacity: 0;
+      display: hidden;
+      padding-top: 0;
+    }
+}
+
+.searchresults {
+  overflow: hidden;
+  transform-origin: top left;
+}