Animate the user notification and make it red

static/css/quay.css

@@ -2,6 +2,48 @@
   font-family: 'Droid Sans', sans-serif;
 }
 
+.user-notification {
+  background: red;
+}
+
+.user-notification.notification-animated {
+  width: 21px;
+
+  transform: scale(0);
+  -moz-transform: scale(0);
+  -webkit-transform: scale(0);
+
+  animation: scaleup 500ms 1;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+
+  -moz-animation: scaleup 500ms 1;
+  -moz-animation-timing-function: ease-in-out;
+  -moz-animation-fill-mode: forwards;
+
+  -webkit-animation: scaleup 500ms 1;
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-fill-mode: forwards;
+}
+
+@-moz-keyframes scaleup { 
+  0% { -moz-transform: scale(0); }
+  100% { -moz-transform: scale(1); }
+}
+
+@-webkit-keyframes scaleup { 
+  0% { -webkit-transform: scale(0); }
+  100% { -webkit-transform: scale(1); }
+}
+
+
+@keyframes scaleup { 
+  0% { transform: scale(0); }
+  100% { transform: scale(1); }
+}
+
+
+
 .repo-circle {
   position: relative;
   background: #eee;

static/partials/header.html

@@ -33,14 +33,14 @@
       <a href="javascript:void(0)" class="dropdown-toggle user-dropdown" data-toggle="dropdown">
         <img src="//www.gravatar.com/avatar/{{ user.gravatar }}?s=32&d=identicon" />
         {{ user.username }}
-        <span class="badge" ng-show="user.askForPassword">1</span>
+        <span class="badge user-notification notification-animated" ng-show="user.askForPassword">1</span>
         <b class="caret"></b>
       </a>
       <ul class="dropdown-menu">
         <li>
           <a href="/user/">
             Account Settings
-            <span class="badge" ng-show="user.askForPassword">1</span>
+            <span class="badge user-notification" ng-show="user.askForPassword">1</span>
           </a>
         </li>
         <li><a href="javascript:void(0)" ng-click="signout()">Sign out</a></li>