I’d like to apply an SVG animation to my download button.

In my practice, the arrow is supposed to scroll down recursively in the red box(like moving through a window).

The animation still expects calibration but the main issue is that the mask doesn’t work as intended.

What goes wrong?

see it in jsfiddle

html

<button id="fanbox-helper-quick-save-button" class="fanbox-helper-fixed-menu-button busy">
  <svg class="fanbox-helper-svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
    <mask id="fanbox-helper-quick-save-arrow-area" x="120" width="272" height="440">
      <rect x="120" width="272" height="440" fill="red"></rect>
    </mask>
    
    <rect x="120" width="272" height="440" fill="red"></rect>
    
    <g id="fanbox-helper-quick-save-arrow" mask="#fanbox-helper-quick-save-arrow-area">
      <path class="arrow stick" stroke="black" stroke-linecap="round" stroke-linejoin="round" fill="none" d="m256,96 l0,256" stroke-width="40"></path>
      <path class="arrow edge left" stroke="black" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="40" d="m256,392 l-104,-104"></path>
      <path class="arrow edge right" stroke="black" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="40" d="m256,392 l104,-104"></path>
    </g>
    <path class="bowl" stroke="black" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="40" d="m64,312 l0,148 l384,0 l0,-148"></path>
  </svg>
</button>

css

@keyframes cog-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes left-edge-swing {
  33% {
    transform: rotate(7deg) translate(0%, -3%);
  }
  66% {
    transform: rotate(-14deg) translate(0%, 5%);
  }
}
@keyframes right-edge-swing {
  33% {
    transform: rotate(-7deg) translate(0%, -3%);
  }
  66% {
    transform: rotate(14deg) translate(0%, 5%);
  }
}
@keyframes arrow-back-forth {
  33% {
    transform: translate(0%, -3%)
  }
  66% {
    transform: translate(0%, 5%)
    } 
}
@keyframes arrow-slide-recursively {
  from {
    transform: translate(0%, 0%)
  }
  to {
    transform: translate(0%, 50%)
  }
}

.fanbox-helper-fixed-menu-button {
  background-color: transparent; cursor: pointer; border: medium; padding: 4px; width: 54px; height: 54px;
}
.fanbox-helper-fixed-menu-button.free {
  opacity: 0.6;
}
.fanbox-helper-fixed-menu-button.busy {
  opacity: 0.3;
  pointer-events: none;
}
#fanbox-helper-quick-save-button.busy .arrow {
  animation: arrow-slide-recursively 2s linear infinite;
}
.fanbox-helper-fixed-menu-button.free:hover {
  opacity: 0.7;
  transition: 0.3s ease-in;
  filter: brightness(1.15);
}
.fanbox-helper-fixed-menu-button.free:active {
  opacity: 1;
  transition: 0.3s ease-in;
  filter: brightness(1.25);
}

#fanbox-helper-open-panel-button.free .edge {
  transform-origin: 50% 50%;
}
#fanbox-helper-open-panel-button.free:hover .edge {
  animation: cog-rotate 2s infinite linear;
}

#fanbox-helper-quick-save-button.free:hover .stick {
  animation: arrow-back-forth 0.6s linear forwards;
}
#fanbox-helper-quick-save-button.free .edge {
  transform-origin: 50% 76.5625%;
}
#fanbox-helper-quick-save-button.free:hover .left.edge {
  animation: left-edge-swing 0.6s linear forwards;
}
#fanbox-helper-quick-save-button.free:hover .right.edge {
  animation: right-edge-swing 0.6s linear forwards;
}