1
\$\begingroup\$

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;
  }
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.