<svg class="block__submit">
  <linearGradient id="linear-gradient1">
    <stop offset="0%" stop-color="#f00" data-to="#0ff" class="stop-start" />
    <stop offset="100%" stop-color="#0ff" data-to="#ff0" class="stop-end" />
  </linearGradient>
  <rect fill="url(#linear-gradient1)" width="100%" height="100%" />
</svg>

const svg = document.querySelector('.block__submit');
const gradient = svg.querySelector('#linear-gradient1');

const onHover = (event) => {
  anime({
    targets: gradient.children,
    duration: 1000,
    easing: 'linear',
    stopColor: (el) => event.type === 'mouseenter' 
      ? el.getAttribute('data-to') 
      : el.getAttribute('stop-color'),
  });
}

svg.addEventListener('mouseenter', onHover);
svg.addEventListener('mouseleave', onHover);