I've made this animation using Sass and CSS-keyframes.

I'm bit worried about my usage of position relative / absolute. Can one expect that it works in all browser reliable? Or to I have to expect things like a offsets?

Moreover: Is there a way to improve it somehow? It doesn't run smoothly. Perhaps I've chosen the wrong tool with CSS-keyframes?

Any hints and tipps to the points mentioned as well as everything else welcomed.

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: #cdcdcd;
  transform: scaleX(1.1);
}

.wrap {
  width: 100%;
  margin: 50px auto;
}

.lane {
  height: 100px;
  width: 100%;
  border-top: 1px solid #0d0d0d;
  border-bottom: 1px solid #0d0d0d;
  animation: moveBackground 8s infinite;
}

.lane:nth-of-type(2) {
  transform: skewX(-50deg);
  position: absolute;
  left: -21px;
  height: 35%;
  box-shadow: 0 5px 0 grey, 0 6px 0 black;
  border-top: none;
}

@keyframes moveBackground {
  0% {
    background: linear-gradient(90deg, black 0%, lime 0% , black 8%);
  }
  1% {
    background: linear-gradient(90deg, black 0%, lime 1% , black 9%);
  }
  2% {
    background: linear-gradient(90deg, black 0%, lime 2% , black 10%);
  }
  3% {
    background: linear-gradient(90deg, black 0%, lime 3% , black 11%);
  }
  4% {
    background: linear-gradient(90deg, black 0%, lime 4% , black 12%);
  }
  5% {
    background: linear-gradient(90deg, black 0%, lime 5% , black 13%);
  }
  6% {
    background: linear-gradient(90deg, black 0%, lime 6% , black 14%);
  }
  7% {
    background: linear-gradient(90deg, black 0%, lime 7% , black 15%);
  }
  8% {
    background: linear-gradient(90deg, black 0%, lime 8% , black 16%);
  }
  9% {
    background: linear-gradient(90deg, black 1%, lime 9% , black 17%);
  }
  10% {
    background: linear-gradient(90deg, black 2%, lime 10% , black 18%);
  }
  11% {
    background: linear-gradient(90deg, black 3%, lime 11% , black 19%);
  }
  12% {
    background: linear-gradient(90deg, black 4%, lime 12% , black 20%);
  }
  13% {
    background: linear-gradient(90deg, black 5%, lime 13% , black 21%);
  }
  14% {
    background: linear-gradient(90deg, black 6%, lime 14% , black 22%);
  }
  15% {
    background: linear-gradient(90deg, black 7%, lime 15% , black 23%);
  }
  16% {
    background: linear-gradient(90deg, black 8%, lime 16% , black 24%);
  }
  17% {
    background: linear-gradient(90deg, black 9%, lime 17% , black 25%);
  }
  18% {
    background: linear-gradient(90deg, black 10%, lime 18% , black 26%);
  }
  19% {
    background: linear-gradient(90deg, black 11%, lime 19% , black 27%);
  }
  20% {
    background: linear-gradient(90deg, black 12%, lime 20% , black 28%);
  }
  21% {
    background: linear-gradient(90deg, black 13%, lime 21% , black 29%);
  }
  22% {
    background: linear-gradient(90deg, black 14%, lime 22% , black 30%);
  }
  23% {
    background: linear-gradient(90deg, black 15%, lime 23% , black 31%);
  }
  24% {
    background: linear-gradient(90deg, black 16%, lime 24% , black 32%);
  }
  25% {
    background: linear-gradient(90deg, black 17%, lime 25% , black 33%);
  }
  26% {
    background: linear-gradient(90deg, black 18%, lime 26% , black 34%);
  }
  27% {
    background: linear-gradient(90deg, black 19%, lime 27% , black 35%);
  }
  28% {
    background: linear-gradient(90deg, black 20%, lime 28% , black 36%);
  }
  29% {
    background: linear-gradient(90deg, black 21%, lime 29% , black 37%);
  }
  30% {
    background: linear-gradient(90deg, black 22%, lime 30% , black 38%);
  }
  31% {
    background: linear-gradient(90deg, black 23%, lime 31% , black 39%);
  }
  32% {
    background: linear-gradient(90deg, black 24%, lime 32% , black 40%);
  }
  33% {
    background: linear-gradient(90deg, black 25%, lime 33% , black 41%);
  }
  34% {
    background: linear-gradient(90deg, black 26%, lime 34% , black 42%);
  }
  35% {
    background: linear-gradient(90deg, black 27%, lime 35% , black 43%);
  }
  36% {
    background: linear-gradient(90deg, black 28%, lime 36% , black 44%);
  }
  37% {
    background: linear-gradient(90deg, black 29%, lime 37% , black 45%);
  }
  38% {
    background: linear-gradient(90deg, black 30%, lime 38% , black 46%);
  }
  39% {
    background: linear-gradient(90deg, black 31%, lime 39% , black 47%);
  }
  40% {
    background: linear-gradient(90deg, black 32%, lime 40% , black 48%);
  }
  41% {
    background: linear-gradient(90deg, black 33%, lime 41% , black 49%);
  }
  42% {
    background: linear-gradient(90deg, black 34%, lime 42% , black 50%);
  }
  43% {
    background: linear-gradient(90deg, black 35%, lime 43% , black 51%);
  }
  44% {
    background: linear-gradient(90deg, black 36%, lime 44% , black 52%);
  }
  45% {
    background: linear-gradient(90deg, black 37%, lime 45% , black 53%);
  }
  46% {
    background: linear-gradient(90deg, black 38%, lime 46% , black 54%);
  }
  47% {
    background: linear-gradient(90deg, black 39%, lime 47% , black 55%);
  }
  48% {
    background: linear-gradient(90deg, black 40%, lime 48% , black 56%);
  }
  49% {
    background: linear-gradient(90deg, black 41%, lime 49% , black 57%);
  }
  50% {
    background: linear-gradient(90deg, black 42%, lime 50% , black 58%);
  }
  51% {
    background: linear-gradient(90deg, black 43%, lime 51% , black 59%);
  }
  52% {
    background: linear-gradient(90deg, black 44%, lime 52% , black 60%);
  }
  53% {
    background: linear-gradient(90deg, black 45%, lime 53% , black 61%);
  }
  54% {
    background: linear-gradient(90deg, black 46%, lime 54% , black 62%);
  }
  55% {
    background: linear-gradient(90deg, black 47%, lime 55% , black 63%);
  }
  56% {
    background: linear-gradient(90deg, black 48%, lime 56% , black 64%);
  }
  57% {
    background: linear-gradient(90deg, black 49%, lime 57% , black 65%);
  }
  58% {
    background: linear-gradient(90deg, black 50%, lime 58% , black 66%);
  }
  59% {
    background: linear-gradient(90deg, black 51%, lime 59% , black 67%);
  }
  60% {
    background: linear-gradient(90deg, black 52%, lime 60% , black 68%);
  }
  61% {
    background: linear-gradient(90deg, black 53%, lime 61% , black 69%);
  }
  62% {
    background: linear-gradient(90deg, black 54%, lime 62% , black 70%);
  }
  63% {
    background: linear-gradient(90deg, black 55%, lime 63% , black 71%);
  }
  64% {
    background: linear-gradient(90deg, black 56%, lime 64% , black 72%);
  }
  65% {
    background: linear-gradient(90deg, black 57%, lime 65% , black 73%);
  }
  66% {
    background: linear-gradient(90deg, black 58%, lime 66% , black 74%);
  }
  67% {
    background: linear-gradient(90deg, black 59%, lime 67% , black 75%);
  }
  68% {
    background: linear-gradient(90deg, black 60%, lime 68% , black 76%);
  }
  69% {
    background: linear-gradient(90deg, black 61%, lime 69% , black 77%);
  }
  70% {
    background: linear-gradient(90deg, black 62%, lime 70% , black 78%);
  }
  71% {
    background: linear-gradient(90deg, black 63%, lime 71% , black 79%);
  }
  72% {
    background: linear-gradient(90deg, black 64%, lime 72% , black 80%);
  }
  73% {
    background: linear-gradient(90deg, black 65%, lime 73% , black 81%);
  }
  74% {
    background: linear-gradient(90deg, black 66%, lime 74% , black 82%);
  }
  75% {
    background: linear-gradient(90deg, black 67%, lime 75% , black 83%);
  }
  76% {
    background: linear-gradient(90deg, black 68%, lime 76% , black 84%);
  }
  77% {
    background: linear-gradient(90deg, black 69%, lime 77% , black 85%);
  }
  78% {
    background: linear-gradient(90deg, black 70%, lime 78% , black 86%);
  }
  79% {
    background: linear-gradient(90deg, black 71%, lime 79% , black 87%);
  }
  80% {
    background: linear-gradient(90deg, black 72%, lime 80% , black 88%);
  }
  81% {
    background: linear-gradient(90deg, black 73%, lime 81% , black 89%);
  }
  82% {
    background: linear-gradient(90deg, black 74%, lime 82% , black 90%);
  }
  83% {
    background: linear-gradient(90deg, black 75%, lime 83% , black 91%);
  }
  84% {
    background: linear-gradient(90deg, black 76%, lime 84% , black 92%);
  }
  85% {
    background: linear-gradient(90deg, black 77%, lime 85% , black 93%);
  }
  86% {
    background: linear-gradient(90deg, black 78%, lime 86% , black 94%);
  }
  87% {
    background: linear-gradient(90deg, black 79%, lime 87% , black 95%);
  }
  88% {
    background: linear-gradient(90deg, black 80%, lime 88% , black 96%);
  }
  89% {
    background: linear-gradient(90deg, black 81%, lime 89% , black 97%);
  }
  90% {
    background: linear-gradient(90deg, black 82%, lime 90% , black 98%);
  }
  91% {
    background: linear-gradient(90deg, black 83%, lime 91% , black 99%);
  }
  92% {
    background: linear-gradient(90deg, black 84%, lime 92% , black 100%);
  }
  93% {
    background: linear-gradient(90deg, black 85%, lime 93% , black 100%);
  }
  94% {
    background: linear-gradient(90deg, black 86%, lime 94% , black 100%);
  }
  95% {
    background: linear-gradient(90deg, black 87%, lime 95% , black 100%);
  }
  96% {
    background: linear-gradient(90deg, black 88%, lime 96% , black 100%);
  }
  97% {
    background: linear-gradient(90deg, black 89%, lime 97% , black 100%);
  }
  98% {
    background: linear-gradient(90deg, black 90%, lime 98% , black 100%);
  }
  99% {
    background: linear-gradient(90deg, black 91%, lime 99% , black 100%);
  }
  100% {
    background: linear-gradient(90deg, black 92%, lime 100% , black 100%);
  }
}
<div class="wrap">
  <div class="lane"></div>
  <div class="lane"></div>
</div>

The interesting part: The uncompiled Sass CSS.

$width: 8;
$primary-color: #cdcdcd;
$animation-duration: 8s;
$border-radius: 6s;
$completeWidth: 100%; // All what's displayed.
$borderVal: 1px solid lighten(black, 5%);
$laneHeight: 100px;
$iterationStep: 1; // Determines how many different gradients.

// Makes a linear gradient with stop-points 
//  depending on the parameter.
// @param $center - Center of the light.
// @param $width - width of the color.
// @param $lightColor
@mixin setBackground($center, $width: 10, $lightColor: crimson) {
  $left: 'black 0%,';
  $right: ', black 100%';
  // Only when the light has already move to the right.
  @if $center > $width {
    $left: 'black #{$center - $width}%,';
  } 
  // Only when the light has some margin to the right.
  @if $center <= (100 - $width) {
    $right: ', black #{$center + $width}%';
  } 

  background:
    linear-gradient( 90deg, 
                     unquote($left)
                     $lightColor unquote($center + '%')
                     unquote($right) );  
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: $primary-color;
  transform: scaleX(1.1); // Get the full screen-width covered with no margins.
}

.wrap {
  width: $completeWidth;
  margin: 50px auto;
}

.lane {
  height: $laneHeight;
  width: 100%;
  border-top: $borderVal;
  border-bottom: $borderVal;
  animation: moveBackground $animation-duration infinite; 
}

.lane:nth-of-type(2) {
  transform: skewX(-50deg); 
  position: absolute;
  left: -21px;
  height: 35%;
  box-shadow: 0 5px 0 grey,
              0 6px 0 black;
  border-top: none;
}

@keyframes moveBackground {
  $percent: 0;

  @while ($percent <= 100) {
    #{$percent * 1%} {
      @include setBackground($percent, $width, lime);
    }  

    $percent: $percent + $iterationStep;
  }
}

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.