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