しましまアニメーションがおかしいのを解決したい

Question

発生している問題

プログレスバーに「動きがあるよ！」という意味でしましまのアニメーションをしたいと思い作成しました。
動いているのですが、どういう条件かわからないタイミングで、縞が一部くっついてピョコピョコしてしまいます。

気にしている挙動は画像の四角で囲った部分です。
同じ指定なのに目標２と４は無事で、１と３だけ発生してしまいます。

挙動を分析しようとCodePenでその部分だけ抜き出してみたのですが、今度は目標２と４で発生してしまいました。。。
CodePenで再現させようとしたソース

アニメーションの速度やしましまの幅などを色々触ってみたのですが、一時でなくなったと思ったら再発したりと何が原因なのかがサッパリわかりません。
どなたかよい解決方法をご存知の方、アドバイスをお願いします！

現状のソース

しましまに関わる部分だけ抜粋しています。

/* プログレスバーのベース（グレーの部分） */
.progress-thin-base{
  background-color: #f5f5f5;
  width: 100%;
  height: 8px;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
/* プログレスバー色がついている部分（色の指定は別） */
.progress-bar{
  height: 100%;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}
/* しましましている部分 */
.progress-border{
  height: 100%;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  background: repeating-linear-gradient(45deg, #000 0, #000 1em, transparent 1em, transparent 2em);
  opacity:.1;
  animation: stripes-move 1s infinite linear;
}
/* しましまアニメーション */
@keyframes stripes-move {
  100% {
    background-position: 3em 0px;
  }
}

/* ブログレスバーの色 */
.bg-info{
  background-color:#1CAF9A;
}

<section>
  <!-- 目標1 -->
  <div class="progress-title-box" style="margin-top:0;">
    <p class=" progress-title">目標１</p>
    <p class="item-right">2/5</p>
  </div>
  <div class="progress-thin-base">
    <div class="progress-bar bg-info" style="width:40%">
      <div v-if="stripes" class="progress-border"></div>
    </div>
 　</div>
  <!-- 目標2 -->
  <div class="progress-title-box" style="margin-top:0;">
    <p class=" progress-title">目標２</p>
    <p class="item-right">17/18</p>
  </div>
  <div class="progress-thin-base">
    <div class="progress-bar bg-info" style="width:94%">
      <div v-if="stripes" class="progress-border"></div>
    </div>
  </div>
  <!-- 目標3 -->
  <div class="progress-title-box" style="margin-top:0;">
    <p class=" progress-title">目標３</p>
    <p class="item-right">11.5/35</p>
   </div>
  <div class="progress-thin-base">
    <div class="progress-bar bg-info" style="width:32.8%">
      <div v-if="stripes" class="progress-border"></div>
    </div>
  </div>
  <!-- 目標4 -->
  <div class="progress-title-box" style="margin-top:0;">
    <p class=" progress-title">目標４</p>
    <p class="item-right">1/4</p>
  </div>
  <div class="progress-thin-base">
    <div class="progress-bar bg-info" style="width:25%">
      <div v-if="stripes" class="progress-border"></div>
    </div>
 　</div>
</section>

Comments

[m.ts10806]

widthはどのように算出されていますか？
おそらく目標部分の2/5の計算だと思いますが、その部分も含めて手打ちではなくプログラムで計算して入れられてますよね？

[m.ts10806]

あと細かいですがCSSの提示部分 //　でコメントアウトのようにされていますが、そのままコピペでは動かず再現確認の手間ともなるのでCSSのコメントアウトにしていただければと。

[m.ts10806]

ちなみにそのコメントアウト部分を除いただけの私の環境では２と３がはっきりと同現象が起きます。１と４も発生していないわけではないですが長さの関係からかハッキリとは見えません。

[SystemAjisai]

widthはプログレスバーの色が付いたところのwidthですよね。
計算は仰られる通り、実績値/目標値（2/5とか）で計算しています。
実際にはVue.jsのコンポーネントになっているので計算はJavascriptで行っていますが、掲示ソースのように固定値でやっても発生するので計算は関係ないと思ってソース掲示は除外しています。

cssは// でコメントアウトできないんですね。lessと言うのを使っていて // でコメントアウトできていたのでcssも同じだと思ってました。
修正しました。ご指摘ありがとうございました。

[SystemAjisai]

「長さの関係からハッキリ見えない」というコメントでこんなに長いのに？？？となってたのですが、プログレスバーのベース（グレーの部分）の幅自体がウインドウ幅に影響されるから、ウインドウ幅が狭いと見えないってことですね。
試しにウインドウサイズを変えてみたら、どの目標値でも現象が発生しました。。。
しましまdivの幅が起因しているってことですね。
ずっと縞の幅とかばっかり気にしていたので考えてませんでした。
ありがとうございました。

Answer 1

根本的解決になっていない対症療法。（Firefoxのデベロッパーツールでのみ確認）

.progress-border {
    width: 200%;
    margin-left: -100%;
}
.progress-bar {
    overflow: hidden;
}

Comments

[SystemAjisai]

すごいです。直りました。
試しにoverflow:hiddenを入れずに、親divの右側に超余白を入れてみたら、見えない部分で同じ現象が起こってました。
現象がdivの頭の方でしか起こってないから、そこを切り落として右の方の綺麗に動いてる部分だけ使うってことですね。
ありがとうございました！

[Stan_Dma]

It would be 対症 instead of 対処.

[kei344]

To: Stan_Dmaさん
誤字指摘ありがとうございます、修正しました。

[Stan_Dma]

I am sorry you don't get me?

[x_x]

編集履歴では確かに修正されているのに直っていないように見えますね

[kei344]

To: Stan_Dmaさん, x_xさん
指摘ありがとうございます。teratailの保存バグでした。