Simplify animation used to denote draft is saved

Simplify animation used to denote draft is saved

The original implementation felt a bit too short, went with a much simpler animation which sticks around for 5 seconds.

5 seconds seems to be the standard and the same timing gmail use

diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 59941c7..2ab2284 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -455,50 +455,23 @@ div.ac-wrap {
 }
 
 .save-animation {
-  transition: all 1s ease-in-out;
-  -webkit-transform: scale(0.1);
-  transform: scale(0.1);
-  -webkit-animation: transformer 1.5s forwards;
-  animation: transformer 1.5s forwards;
+  -webkit-animation: transformer 5s forwards;
+  animation: transformer 5s forwards;
 }
 
 @-webkit-keyframes transformer {
-  0% {
-    -webkit-transform: scale(0.1);
-  }
-  20% {
-    -webkit-transform: scale(1.2);
-  }
-  40% {
-    -webkit-transform: scale(1);
-    -webkit-filter: opacity(1);
-  }
-  60% {
-    -webkit-transform: scale(1);
+  90% {
     -webkit-filter: opacity(1);
   }
   100% {
-    -webkit-transform: scale(1);
     -webkit-filter: opacity(0);
   }
 }
 @keyframes transformer {
-  0% {
-    transform: scale(0.1);
-  }
-  20% {
-    transform: scale(1.2);
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  60% {
-    transform: scale(1);
+  90% {
     opacity: 1;
   }
   100% {
-    transform: scale(1);
     opacity: 0;
   }
 }

GitHub sha: 2fea29a3

I could have gone with a longer animation duration but removing the scale kinda looks very rough and unpolished to me now. Why remove the keyframes anyways?

I wanted to minimize distraction here and found that the fancy popping kept on “making me look at it”, 5 seconds seems to be the norm for the delay here.

Open to tweaking this a bit more but I would prefer to leave that to @awesomerobot he can make the call on any more changes here.