Почему анимация приостанавливается на 50%? CSS

Question

.wrapper {
  width: 300px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(1,1,1,0.3);
}

.loading_attr {
  height: 3px;
  background: #9758A7;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: loading_attr_animation;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
}

@keyframes loading_attr_animation {
  0% {
    left: 0;
    width: 10%;
  }
  50% {
    left: 30%;
    width: 30%;
  }
  100% {
    width: 10%;
    left: 100%;
  }
}

<div class="wrapper">
  <div class="loading_attr"></div>
<div>

Почему анимация приостанавливается на 50% и через несколько миллисекунд идёт дальше? Я ожидаю что фиолетовая полоса будет идти без остановки с одинаковой скоростью на протяжении всей итерации анимации

Answer 1

Вам нужно свойство animation-timing-function.

.wrapper {
  width: 300px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(1,1,1,0.3);
}

.loading_attr {
  height: 3px;
  background: #9758A7;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: loading_attr_animation;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  animation-timing-function: linear;
}

@keyframes loading_attr_animation {
  0% {
    left: 0;
    width: 10%;
  }
  50% {
    left: 30%;
    width: 30%;
  }
  100% {
    width: 10%;
    left: 100%;
  }
}

<div class="wrapper">
  <div class="loading_attr"></div>
<div>

БЛОГ НА HUSL

Почему анимация приостанавливается на 50%? CSS

Ответы (1 шт):