css文字过长左右滑动

// 个性化部分 ⬇️
.box {
    width: auto;
    border: 1px solid;
   max-width:4rem;
}

// 通用代码部分 
.scroll-wrap {
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    white-space: nowrap;
}

.scroll-item {
    animation: scroll linear 4s alternate infinite;
    float: left;
}

@keyframes scroll {
    0% {
        margin-left: 0;
        transform: translateX(0);
    }

    10% {
        margin-left: 0;
        transform: translateX(0);
    }

    90% {
        margin-left: 100%;
        transform: translateX(-100%);
    }

    100% {
        margin-left: 100%;
        transform: translateX(-100%);
    }
}

<div class="box">
      <div class="scroll-wrap">
          <div class="scroll-item">
              我是开头，我是中间我是中间我是中间，我是结尾
          </div>
      </div>
  </div>