Merge pull request #2158 from awesomerobot/master

adding a few simple animations to the topic list loading spinner and modals

app/assets/stylesheets/desktop/discourse.scss

@@ -265,7 +265,7 @@ blockquote {
 
 .spinner {
   width: 100px;
-  margin: 0 auto 30px auto;
+  margin: 20px auto 30px auto;
   background-color: #000;
   @include border-radius-all(10px);
   padding: 10px 10px 10px 30px;
@@ -279,8 +279,35 @@ blockquote {
     position: 10px 8px;
     size: 25px;
   };
+  -webkit-animation: spinner .25s;
+  animation: spinner .25s;
 }
 
+//loading spinner drop-in animation
+@-webkit-keyframes spinner {
+  0% {
+      margin: 0px auto 30px auto;
+      opacity: 0;
+    }
+    100% {
+    margin: 20px auto 30px auto;
+      opacity: 1;
+    }
+}@keyframes modal {
+    0% {
+        margin: 0px auto 30px auto;
+        opacity: 0;
+      }
+      100% {
+      margin: 20px auto 30px auto;
+        opacity: 1;
+      }
+}
+
+
+
+
+
 .avatar {
   @include border-radius-all(2px);
 }

app/assets/stylesheets/desktop/modal.scss

@@ -31,10 +31,22 @@
 
 .modal-backdrop,
 .modal-backdrop.fade.in {
+  -webkit-animation: fade .25s;
+  animation: fade .25s;
   opacity: 0.8;
   filter: alpha(opacity=80);
 }
 
+//fade in
+
+@-webkit-keyframes fade {
+    from {opacity: 0}
+    to {opacity: .8}
+}@keyframes fade {
+    from {opacity: 0}
+    to {opacity: .8}
+}
+
 .modal-outer-container {
   display:table;
   width:100%;
@@ -79,16 +91,37 @@
 
   box-shadow: 0 3px 7px rgba($primary_shadow_color, .8);
   background-clip: padding-box;
+
 }
 
-.modal.fade {
-  -webkit-transition: opacity .3s linear, top .3s ease-out;
-  transition: opacity .3s linear, top .3s ease-out;
-  top: -25%;
+.modal.in {
+-webkit-animation: modal .25s;
+animation: modal .25s;
 }
-.modal.fade.in {
-  top: 50%;
+
+//fade in and animate up
+
+@-webkit-keyframes modal {
+  0% {
+      margin-top: 100px;
+      opacity: 0;
     }
+    100% {
+      margin-top: 0;
+      opacity: 1;
+    }
+
+  }@keyframes modal {
+    0% {
+        margin-top: 100px;
+        opacity: 0;
+      }
+      100% {
+        margin-top: 0;
+        opacity: 1;
+      }
+}
+
 .modal-body {
   overflow-y: auto;
   max-height: 400px;