diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css
index 5fa47f1c4..b7dcff00f 100644
--- a/app/assets/stylesheets/animation.css
+++ b/app/assets/stylesheets/animation.css
@@ -33,6 +33,11 @@
     75% { transform: translateX(1rem); }
   }
 
+  @keyframes success {
+    0%  { background-color: var(--color-border-darker); scale: 0.8; }
+    33% { background-color: var(--color-border-darker); scale: 1; }
+  }
+
   @keyframes wobble {
     0%  { transform: rotate(calc(var(--bubble-rotate) + 30deg)); }
     15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
@@ -41,4 +46,8 @@
     50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
     75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
   }
+
+  @keyframes zoom-fade {
+    100% { transform: translateY(-1.5em); scale: 2; opacity: 0; }
+  }
 }
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index e7f75840a..4c6e84874 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -184,10 +184,11 @@
   }
 
   .btn--success {
-    animation: success 1s ease-out;
+    --success-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1);
+    animation: success 1s var(--success-timing-function);
 
     .icon {
-      animation: zoom-fade 300ms ease-out;
+      animation: zoom-fade 500ms var(--success-timing-function);
     }
   }