CSS background animation works in pixels, not in percentages

<style type="text/css">
  * {
    box-sizing: border-box;
  }

  .fancy {
    position: relative;
    max-width: 400px;
    padding: 15px;
    text-align: center;
  }

  .fancy::before, .fancy::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
  }

  .fancy::before {
    top: 0;
    background: linear-gradient(to right, #FFFFFF, #168DBF 70%);
    animation: fancy-top 2s linear infinite;
  }

  .fancy::after {
    bottom: 0;
    background: linear-gradient(to left, #FFFFFF, #168DBF 70%);
    animation: fancy-bottom 2s linear infinite;
  }

  @keyframes fancy-top {
    0%    { background-position: 0 0; }
    100%  { background-position: 400px 0; }
  }

  @keyframes fancy-bottom {
    0%    { background-position: 0 0; }
    100%  { background-position: -400px 0; }
  }
</style>
<h1 class="fancy">Fancy Heading</h1>