Как исправить полноэкранный загрузчик @keyframes

Question

На моем сайте я пытаюсь сделать простой полноэкранный загрузчик белого цвета с одним элементом <div>, но вместо того, чтобы идти вправо в конце, элемент <div> частично идет влево, затем щелкает вправо. Есть какие нибудь идеи как это починить? Вот демо:

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

Вы должны разделить ваш keyframe на три равные части.

• from to 33%: белый div появляется
• from 33% to 66%: изменить position из div
• from 66% to to: белый div исчезнет

Изменить вас keyframe так:

@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>

Как вы можете видеть таким образом, скорость анимации не линейна, и это не тот результат, который мы хотим.

I предложим вам разделить keyframe на две части:

• from to 50%: белый div появится
• from 50% to to: белый div переместится в макс left position

Поэтому:

@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>