👋

【CSS】カタカタ動かす

2024/05/28に公開

カタカタ動かす実装をしてみました。

.swing {
  width: 100px;
  height: 100px;
  background: red;
  animation-name: katakata;
  animation-duration: 6000ms;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  
}

@keyframes katakata {
  0% {
    transform: translateY(-2px) rotate(6deg);
  }

  10% {
      transform: translate(0) rotate(0deg);
  }
  20% {
      transform: translate(0) rotate(-6deg);
  }
  30% {
      transform: translateY(-2px) rotate(0deg);
  }
  40% {
      transform: translateY(-2px) rotate(6deg);
  }
  50% {
      transform: translate(2px) rotate(-2deg);
  }
  60% {
      transform: translateY(2px) rotate(0deg);
  }
  70% {
      transform: translate(0) rotate(6deg);
  }
  80% {
      transform: translate(2px) rotate(-2deg);
  }
  90% {
      transform: translate(0) rotate(0deg);
  }
  100% {
      transform: translateY(-2px) rotate(6deg);
  }
}

animation-timing-function: step-start;
step-starはアニメーションが瞬時に開始して、途中で変化がなく、最終的な値に到達するまでその値が一定のままであることを意味します。この場合では、アニメーションが急激に始まり、各キーフレーム間で直線的な遷移が行われます。

まとめ

前回作ったカクカクの応用（？）です
完全に自分用のメモです...！

カタカタ動かす実装をしてみました。

まとめ

Discussion