Почему анимация выглядит не так ка надо?

Question

[Rasrabotchik]

Мне нужно такую анимацию.

У меня border-style: dashed. Я изменяю border-width, но получается как-то не так:

Есть идея изменить border-style на dotted, но тогда границы в виде точек.

.animate {
  width: 200px;
  height: 200px;
  border: 8px dashed red;
  animation: div_animation 1s steps(2) infinite;
}
@keyframes div_animation {
  0% {
    border: 2px dashed red;
  }
  100% {
    border: 8px dashed red;
  }
}

Comments

[Вадим]

Мне нужно такую анимацию.

Есть идея изменить border-style на dotted, но тогда границы в виде точек.

Так это именно то что у Вас в гифке и происходит. Меняется с точек на тире. border-width не причём.

Answer 1

[mahmudchon]

У Вас общий размер блока меняется, в зависимости от размера border'а.
Как вариант:

@keyframes div_animation {
  0% {
    border: 8px dotted red;
  }
  100% {
    border: 8px dashed red;
  }
}

Будет как в примере.