.dashed-box {
    position: relative;
    width: 100%;
}

.dashed-box .dash-top,
.dashed-box .dash-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    overflow: hidden;
}

.dashed-box .dash-left,
.dashed-box .dash-right {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    width: 2px;
    overflow: hidden;
}

/* позиционирование */
.dashed-box .dash-top { top: 0; }
.dashed-box .dash-bottom { bottom: 0; }
.dashed-box .dash-left { left: 0; }
.dashed-box .dash-right { right: 0; }

/* —— НОВЫЙ ИДЕАЛЬНЫЙ ПАТТЕРН (БЕЗ РЫВКОВ) —— */

/* горизонтальные */
.dashed-box .dash-top::after,
.dashed-box .dash-bottom::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to right,
        #000 0px,
        #000 4px,
        transparent 4px,
        transparent 8px
    );
    background-size: 8px 2px;
}

/* вертикальные */
.dashed-box .dash-left::after,
.dashed-box .dash-right::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        #000 0px,
        #000 4px,
        transparent 4px,
        transparent 8px
    );
    background-size: 2px 8px;
}

/* —— ПРАВИЛЬНЫЕ ЗАЦИКЛЕННЫЕ АНИМАЦИИ —— */

@keyframes move-left  { from { transform: translateX(0); } to { transform: translateX(-8px); } }
@keyframes move-right { from { transform: translateX(-8px); } to { transform: translateX(0); } }
@keyframes move-up    { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes move-down  { from { transform: translateY(-8px); } to { transform: translateY(0); } }

/* направления */
.dashed-box [data-dir="left"]::after  { animation: move-left 0.9s linear infinite; }
.dashed-box [data-dir="right"]::after { animation: move-right 0.9s linear infinite; }
.dashed-box [data-dir="up"]::after    { animation: move-up 0.9s linear infinite; }
.dashed-box [data-dir="down"]::after  { animation: move-down 0.9s linear infinite; }

.fix-text {
  background: red !important;
}