From 805bb7caaf0c86d60872dca0595fd06b49dadad6 Mon Sep 17 00:00:00 2001
From: Emmanouil Konstantinidis <manos@dabapps.com>
Date: Sat, 5 Sep 2015 01:27:01 +0100
Subject: [PATCH] Animate text with CSS

---
 src/js/components/notifications.js |  4 +--
 src/less/style.less                | 43 ++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/js/components/notifications.js b/src/js/components/notifications.js
index 44f982b36..e58790f0f 100644
--- a/src/js/components/notifications.js
+++ b/src/js/components/notifications.js
@@ -76,8 +76,8 @@ var Notifications = React.createClass({
       if (notificationsEmpty) {
         notifications = (
           <div>
-            <h2>There are no notifications for you.</h2>
-            <h3>All clean!</h3>
+            <h2>Awesome! <span className='what'>&nbsp;</span></h2>
+            <h3>No new notifications.</h3>
             <img className='img-responsive emoji' src='images/all-read.png' />
           </div>
         );
diff --git a/src/less/style.less b/src/less/style.less
index e44b07851..9b1d4fe16 100644
--- a/src/less/style.less
+++ b/src/less/style.less
@@ -435,6 +435,49 @@ input {
     }
   }
 
+  &.all-read {
+    @-webkit-keyframes typing {
+      0% {
+        width: 100%;
+      }
+
+      20% {
+        width: 100%;
+      }
+
+      100% {
+        width: 0;
+      }
+    }
+
+    h2 {
+      .FontOpenSansSemibold();
+      font-style: italic;
+      position: relative;
+      margin: 10px auto;
+    }
+
+    h3 {
+      .FontOpenSansLight();
+      position: relative;
+      margin: 5px auto;
+    }
+
+    h2, h3 {
+    }
+
+    h2 .what {
+        position:absolute;
+        top:0;
+        right:0;
+        width:0;
+        background: @ThemePrimary;
+
+        box-sizing: border-box;
+        -webkit-animation: typing 1.5s steps(50, end);
+    }
+  }
+
   .fork {
     padding: 10px 0;
     font-size: 18px;