--- a/browser/components/downloads/content/indicator.js
+++ b/browser/components/downloads/content/indicator.js
@@ -425,41 +425,33 @@ const DownloadsIndicatorView = {
    * Progress indication to display, from 0 to 100, or -1 if unknown.
    * Bar-type:
    *   The progress bar is hidden if the current progress is unknown and no
    *   status text is set in the "counter" property.
    * Arrow-type:
    *   progress is not visible if the current progress is unknown.
    */
   set percentComplete(aValue) {
-    // For arrow type only:
-    // We show portion of the success icon in propotional with the download
-    // progress as an indicator. the PROGRESS_ICON_EMPTY_HEIGHT_PERCENT and
-    // PROGRESS_ICON_FULL_HEIGHT_PERCENT correspond to how much portion of the
-    // icon should be displayed in 0% and 100%.
-    const PROGRESS_ICON_EMPTY_HEIGHT_PERCENT = 35;
-    const PROGRESS_ICON_FULL_HEIGHT_PERCENT = 87;
-
     if (!this._operational) {
       return this._percentComplete;
     }
 
     if (this._percentComplete !== aValue) {
       this._percentComplete = aValue;
       this._refreshAttention();
 
       if (this._percentComplete >= 0) {
         this.indicator.setAttribute("progress", "true");
-        this._progressIcon.style.height = (this._percentComplete *
-          (PROGRESS_ICON_FULL_HEIGHT_PERCENT -
-           PROGRESS_ICON_EMPTY_HEIGHT_PERCENT) / 100 +
-           PROGRESS_ICON_EMPTY_HEIGHT_PERCENT) + "%";
+        // For arrow type only:
+        // We set animationDelay to a minus value (0s ~ -100s) to show the
+        // corresponding frame needed for progress.
+        this._progressIcon.style.animationDelay = (-this._percentComplete) + "s";
       } else {
         this.indicator.removeAttribute("progress");
-        this._progressIcon.style.height = "0";
+        this._progressIcon.style.animationDelay = "1s";
       }
       // We have to set the attribute instead of using the property because the
       // XBL binding isn't applied if the element is invisible for any reason.
       this._indicatorProgress.setAttribute("value", Math.max(aValue, 0));
     }
     return aValue;
   },
   _percentComplete: null,

--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -8,14 +8,45 @@
 
 #downloads-indicator-progress-icon {
   background: var(--downloads-indicator-image-attention) bottom no-repeat;
   background-size: 18px;
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 0;
-  transition: height 0.5s;
+  /* From javascript side we use animation delay from 0s to -100s to show
+   * corresponding frames needed for progress.
+   * animation-delay is set to a positive value to make nothing shown.
+   */
+  animation-play-state: paused;
+  animation-delay: 1s;
+  animation-duration: 100s;
+  animation-timing-function: linear;
+  animation-name: indicatorArrowProgress;
 }
 
 toolbar[brighttext] #downloads-indicator-progress-icon {
   background-image: var(--downloads-indicator-image-attention-inverted);
+  animation-name: indicatorArrowProgressDark;
 }
+
+@keyframes indicatorArrowProgress {
+  0% {
+    height: 35%;
+    filter: brightness(1.2);
+  }
+  100% {
+    height: 87%;
+    filter: brightness(1);
+  }
+}
+
+@keyframes indicatorArrowProgressDark {
+  0% {
+    height: 35%;
+    filter: brightness(0.7);
+  }
+  100% {
+    height: 87%;
+    filter: brightness(1);
+  }
+}