質問

CSSのkeyframeアニメーションで左右に移動するアニメーションを作ったのですが、アニメーションの開始のkeyframeに戻った時に、0pxが0%と100%の時に連続するためなのか、ちょっとガクついてしまいます。もっとスムーズにループさせるためにはどうすれば良いのでしょうか？
ご教示頂けると大変嬉しいです！

アニメーションGIF

コード

<div class="container">
  <span class="icon">????</span>
</div>

.container {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  animation: move 1s ease-in-out infinite;
  font-size: 72px;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(8px);
  }
  75% {
    transform: translateX(-8px);
  }
  100% {
    transform: translateX(0);
  }
}

行動規範の内容に同意します

回答1件

ベストアンサー

ease-in-outを指定しているので、
開始時(0%)と終了時(100%)は移動がゆっくりになるため、0位置でガクつくようにみえます。

animation: move 1s linear infinite;とすればガクつきはなくなります。

ease-in-outを使いたいなら、下記のようにするといいでしょう。

css
1@keyframes move {
2  0% {
3    transform: translateX(-8px);
4  }
5  50% {
6    transform: translateX(8px);
7  }
8  100% {
9    transform: translateX(-8px);
10  }
11}