🕌

【css】カクカク動かす＆ふわふわ動かす

2024/05/25に公開

カクカク動かす

.swing {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: decoSwing;
  animation-duration: 2400ms;
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
}
@keyframes decoSwing {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(25deg);
  }
}

@keyframesをつかって、0％〜100％にかけて25deg回転する
decoSwingというアニメーションを定義する
animation-timing-function: steps(2, end);
steps(2, end)は、
アニメーションを2分割して、end は各ステップの最後で次のステップに変わることを意味します！
animation-iteration-count: infinite;
infiniteは無限に繰り返すことを意味します。

ふわふわ動かす

.fuwafuwa {
  width: 100px;
  height: 100px;
  margin-top: 50px;
  background-color: yellow;
  border-radius: 50%;
  animation-name: floating;
  animation-duration: 3000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes floating {
   0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

animation-timing-function: ease-in-out
ease-in-out: アニメーションの開始と終了の両方で動きが緩やかになります。つまり、最初はゆっくりと始まり、中間で速くなり、最後は再びゆっくりと終わります。

animation-timing-functionについて

カタカタで使ったsteps()、ふわふわで使ったease-in-out以外にもいろいろな設定値があります

linear: アニメーションが一定の速度で進行します。例えば、アニメーション全体が均一な速度で動きます。
ease: デフォルトの値で、開始時はゆっくり、中間で速く、終了時にまたゆっくりになりますが、ease-in-outほど極端ではありません。
ease-in: アニメーションの開始時にゆっくり始まり、終わりにかけて速くなります。
ease-out: アニメーションの開始時に速く始まり、終わりに向かってゆっくりになります。
cubic-bezier()：ベジェ曲線に4つのパラメータをセットして使います。
ベジェ曲線のパラメータ
P1のx座標: アニメーション開始後の加速度を制御します。
P1のy座標: アニメーション開始時の速度を制御します。
P2のx座標: アニメーション終了前の加速度を制御します。
P2のy座標: アニメーション終了時の速度を制御します。
パラメータが何かはわかったけどどう設定するのかわからない。。。
そんなときはベジェ曲線を視覚化できるツールを使おう！
https://cubic-bezier.com/

カクカク動かす

ふわふわ動かす

animation-timing-functionについて

Discussion