Ключевые кадры анимации% не работают правильно

Question

.shimmer {
  width: 211px;
  overflow: hidden;
}

.shimmer::before {
  content: "";
  position: absolute;
  height: 65%;
  width: 45%;
  left: -75px;
  background-image: linear-gradient(to right, black, 50%, transparent);
  transform: rotate(-70deg);
  animation-duration: 100s;
  animation-iteration-count: infinite;
}

@keyframes test {
  0% {
    left: -75px;
  }
  5% {
    left: 200px;
  }
  100% {
    left: 20px;
  }
}

Мне нужно запустить анимацию для моего элемента :: before в определенное время. Я использовал Javascript для ввода имени анимации в голове.

var styleElem = document.head.appendChild(document.createElement("style"));
styleElem.innerHTML = ".shimmer::before {animation-name:test ;}"

Когда функция запускается, мне нужно, чтобы анимация запускалась и заканчивалась sh в течение 1 секунды, а затем повторялась через каждые 100 секунд. Чтобы протестировать скорость и c, я хотел, чтобы это было конечное значение sh при 5% (поскольку анимация должна длиться примерно 1 секунду). Затем она будет ждать (скрыто), поэтому, когда истечет 100, пришло время снова запускаться.

javascript работает нормально, и анимация запускается. Проблема в том, что ключевые кадры% не учитываются, они будут просто анимироваться более 100 секунд? что я делаю не так?

Answer 1

Установить 200px в точке 100%:

100% {left: 200px;}

Answer 2

0%{

left: -75px;

};

Точка с запятой здесь была проблема !!!!!