diff --git a/css/converse.css b/css/converse.css
index 1e801ae4a..85908b564 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1091,7 +1091,33 @@
     display: block;
     margin: 0 auto;
     clear: both; }
+@keyframes fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+@-webkit-keyframes fadein {
+  0% {
+    font-size: 0; }
+  100% {
+    font-size: 40px; } }
+  #conversejs .visible {
+    visibility: visible;
+    opacity: 1;
+    -webkit-animation-name: fadein;
+    -moz-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 350ms;
+    -moz-animation-duration: 350ms;
+    animation-duration: 350ms;
+    -webkit-animation-timing-function: ease;
+    -moz-animation-timing-function: ease;
+    animation-timing-function: ease; }
   #conversejs .hidden {
+    opacity: 0;
     display: none; }
   #conversejs .locked {
     padding-right: 22px; }
diff --git a/sass/_core.scss b/sass/_core.scss
index d61dbd0e1..40e466c56 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -49,9 +49,29 @@
         margin: 0 auto;
         clear: both;
     }
+
+    @keyframes fadein {
+        0% { opacity: 0 }
+        100% { opacity: 1 }
+    }
+    @-webkit-keyframes fadein {
+        0% { font-size: 0 }
+        100% { font-size: 40px }
+    }
+
+    .visible {
+        visibility: visible;
+        opacity: 1;
+        @include animation-name(fadein);
+        @include animation-fill-mode(forwards);
+        @include animation-duration(350ms);
+        @include animation-timing-function(ease);
+    }
     .hidden {
+        opacity: 0;
         display: none;
     }
+
     .locked {
         padding-right: 22px;
     }
diff --git a/src/utils.js b/src/utils.js
index 127cec7c4..340fd3d5b 100755
--- a/src/utils.js
+++ b/src/utils.js
@@ -217,23 +217,12 @@
                 callback();
                 return;
             }
-            el.style.opacity = 0;
+            el.addEventListener("animationend", function () {
+                el.classList.remove('visible');
+                callback();
+            }, false);
+            el.classList.add('visible');
             el.classList.remove('hidden');
-            var last = +new Date();
-            var tick = function() {
-                el.style.opacity = +el.style.opacity + (new Date() - last) / 100;
-                last = +new Date();
-                if (+el.style.opacity < 1) {
-                    if (!_.isUndefined(window.requestAnimationFrame)) {
-                        window.requestAnimationFrame(tick);
-                    } else {
-                        window.setTimeout(tick, 16);
-                    }
-                } else {
-                    callback();
-                }
-            };
-            tick();
         },
 
         isOTRMessage: function (message) {