diff --git a/res/css/_animations.sass b/res/css/_animations.sass
index 03ba8b9e8b79932236b57506d52be6c47f04f66c..03993488a66c49dd76d7fea702ebff5816520024 100644
--- a/res/css/_animations.sass
+++ b/res/css/_animations.sass
@@ -3,6 +3,24 @@
     margin-top: 1rem
     opacity: 0
 
+  to
+    margin-top: 0
+    opacity: 1
+
+@keyframes slidein_msg_before
+  from
+    margin-bottom: .5rem
+    opacity: 0
+
+  to
+    margin-bottom: 0
+    opacity: 1
+
+@keyframes slidein_msg_after
+  from
+    margin-top: .5rem
+    opacity: 0
+
   to
     margin-top: 0
     opacity: 1
\ No newline at end of file
diff --git a/res/css/_content.sass b/res/css/_content.sass
index ee95b8faf394842326d7087275b3e0e1ef14d6eb..a4d6c9e5f90da229f083a3ddd7bb48005775fb45 100644
--- a/res/css/_content.sass
+++ b/res/css/_content.sass
@@ -187,7 +187,7 @@
           vertical-align: top
           margin-right: 16px
 
-      &.before > .inline-button:before
+      &.before> .inline-button:before
         background-image: url(../icons/chevron-up.svg)
 
       &.after > .inline-button:before
@@ -199,6 +199,9 @@
         animation-duration: 1s
         animation-name: slidein
 
+        .container .inline-button:first-child:last-child
+          display: none
+
         &.focus
           padding: 0
           margin: 0.5rem -0.5rem
@@ -206,19 +209,15 @@
           @media(max-width: 800px)
             margin: 1rem 0
 
-        &:before
-          bottom: 0
-          box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24)
-          content: ''
-          display: block
-          left: 0
-          pointer-events: none
-          position: absolute
-          right: 0
-          top: 0
+          .container.before
+            .message, .inline-button
+              animation-name: slidein_msg_before
+              animation-duration: 400ms
 
-        > .container > .inline-button
-          box-shadow: none
+          .container.after
+            .message, .inline-button
+              animation-name: slidein_msg_after
+              animation-duration: 400ms
 
         &:not(.focus)
           > .before, > .after
@@ -236,6 +235,17 @@
           background: #fff
           position: relative
 
+          &:before
+            bottom: 0
+            box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24)
+            content: ''
+            display: block
+            left: 0
+            pointer-events: none
+            position: absolute
+            right: 0
+            top: 0
+
           > .more
             height: 56px
             width: 56px
diff --git a/res/css/search.css b/res/css/search.css
index e8c2a7a20fb56693f9ec6b14c897e3949d48bf0d..f8fccc34f09c9b213a711df7daca411b45683585 100644
--- a/res/css/search.css
+++ b/res/css/search.css
@@ -1076,24 +1076,20 @@ body {
         position: relative;
         animation-duration: 1s;
         animation-name: slidein; }
+        .results .buffer .container .context .container .inline-button:first-child:last-child {
+          display: none; }
         .results .buffer .container .context.focus {
           padding: 0;
           margin: 0.5rem -0.5rem; }
           @media (max-width: 800px) {
             .results .buffer .container .context.focus {
               margin: 1rem 0; } }
-        .results .buffer .container .context:before {
-          bottom: 0;
-          box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
-          content: '';
-          display: block;
-          left: 0;
-          pointer-events: none;
-          position: absolute;
-          right: 0;
-          top: 0; }
-        .results .buffer .container .context > .container > .inline-button {
-          box-shadow: none; }
+          .results .buffer .container .context.focus .container.before .message, .results .buffer .container .context.focus .container.before .inline-button {
+            animation-name: slidein_msg_before;
+            animation-duration: 400ms; }
+          .results .buffer .container .context.focus .container.after .message, .results .buffer .container .context.focus .container.after .inline-button {
+            animation-name: slidein_msg_after;
+            animation-duration: 400ms; }
         .results .buffer .container .context:not(.focus) > .before, .results .buffer .container .context:not(.focus) > .after {
           display: none; }
         .results .buffer .container .context:not(.focus) > .inline-button {
@@ -1106,6 +1102,16 @@ body {
           color: #212121;
           background: #fff;
           position: relative; }
+          .results .buffer .container .context .message:before {
+            bottom: 0;
+            box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
+            content: '';
+            display: block;
+            left: 0;
+            pointer-events: none;
+            position: absolute;
+            right: 0;
+            top: 0; }
           .results .buffer .container .context .message > .more {
             height: 56px;
             width: 56px;
@@ -1217,3 +1223,19 @@ body {
   to {
     margin-top: 0;
     opacity: 1; } }
+
+@keyframes slidein_msg_before {
+  from {
+    margin-bottom: .5rem;
+    opacity: 0; }
+  to {
+    margin-bottom: 0;
+    opacity: 1; } }
+
+@keyframes slidein_msg_after {
+  from {
+    margin-top: .5rem;
+    opacity: 0; }
+  to {
+    margin-top: 0;
+    opacity: 1; } }