How to fix fullscreen #keyframes loader - css

Question

On my website, I'm trying to make a simple white full-screen loader with one <div> element, but instead of going to the right at the end, the <div> element goes partially to the left, then snaps to the right. Any ideas on how to fix this? Here's a demo:
body {
background-color: #121212;
}
div#l {
position: absolute;
height: 100%;
top: 0;
background-color: white;
animation: loader 2s infinite;
}
#keyframes loader {
from {
left: 0;
width: 0;
}
49% {
width: 100%;
left: 0;
}
51% {
width: 100%;
right: 0;
}
to {
width: 0;
right: 0;
}
}
<div id='l'></div>

Answer 1

You should divide your keyframe in three equal parts.
from to 33%: the white div appear
from 33% to 66%: change the position of the div
from 66% to to: the white div disappear
Edit you keyframe like this:
#keyframes loader {
from {
left: 0;
width: 0;
}
33% {
width: 100%;
left: 0;
}
66% {
width: 100%;
right: 0;
}
to {
right: 0;
width: 0;
}
}
body {
background-color: #121212;
}
div#l {
position: absolute;
height: 100%;
top: 0;
background-color: white;
animation: loader 2s infinite;
}
#keyframes loader {
from {
left: 0;
width: 0;
}
33% {
width: 100%;
left: 0;
}
66% {
width: 100%;
right: 0;
}
to {
right: 0;
width: 0;
}
}
<div id='l'></div>
As you can see in this way the speed of the animation is not linear, and it is not the result we want.
I sugget you to divide the keyframe in two parts:
from to 50%: the white div appear
from 50% to to: the white div move itself to it's max left position
Therefore:
#keyframes loader {
from {
left: 0;
width: 0;
}
50% {
left: 0;
width: 100%;
}
to {
left: 100%;
width: 0;
}
}
body {
background-color: #121212;
}
div#l {
position: absolute;
height: 100%;
top: 0;
background-color: white;
animation: loader 2s infinite;
}
#keyframes loader {
from {
left: 0;
width: 0;
}
50% {
left: 0;
width: 100%;
}
to {
left: 100%;
width: 0;
}
}
<div id='l'></div>