"Moving gradient"-animation with CSS-keyframes and Sass

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;   } } 

Replay

Category: css Time: 2016-07-29 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.155 (s). 12 q(s)