CSSアニメーションをループさせる時にkeyframeが0%の時にガクついてしまう

Question

質問

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);
  }
}

Answer 1

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

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

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

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

-8pxと8pxの位置でゆっくりになります。

Comments

[murabito]

なるほど！！easeのせいだったのですね。ありがとうございました！