【CSS】@keyframesとanimationでアニメーションの設定

cssでアニメーション CSS
スポンサーリンク

こんにちは、素人エンジニアです。

cssでアニメーションを設定する方法を紹介します!

animationと@keyframesを使って動きや変化のあるデザインを作りましょう

CSSアニメーションのサンプル

どきどきハートです。

@keyframes beat {
  0% {
    transform: rotate(45deg) scale(1,1);
  }
  10% {
    transform: rotate(45deg) scale(0.6,0.6);
  }
  30% {
    transform: rotate(45deg) scale(1,1);
  }
  100% {
    transform: rotate(45deg) scale(1,1);
  }
}
animation: 2s ease-out 0s infinite running beat;

ハートの作り方については、こちらの記事をご覧ください。

CSSアニメーションの作り方

CSSでアニメーションを作るには、@keyframesとanimationを設定します。

  • @keyframes:アニメーションの開始から終了までの動きを設定
  • animation:アニメーションの継続時間や実行回数などをまとめて設定

まずは、@keyframesについて見ていきましょう

@keyframesについて

@keyframesはこのように記述します。

@keyframes 名前 {
  0% {
    cssプロパティ: 設定値;
  }
  100% {
    cssプロパティ: 設定値;
  }
}

名前は任意に付けられます。動きに適した名前を付けましょう!
アニメーションの動きや変化は、経過をパーセント(%)で区切って指定します。

  • アニメーションの開始:0%
  • アニメーションの終了:100%

0%から100%のアニメーションにする場合は、fromとtoでも指定できます。

例えば、要素をフェードアウト(透明に)したいときは、このように設定します。

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

animationについて

@keyframesで指定したアニメーションは、animationを設定することで適用されます。
animationプロパティでは、次のパラメタを指定できます。

  • animation-name:@keyframesアニメーションの名前
  • animation-duration:1回のアニメーションが終わるまでの時間
  • animation-timing-function:アニメーションのタイミング・進行割合
  • animation-delay:いつ開始するか(遅延時間)
  • animation-iteration-count:アニメーション再生回数
  • animation-direction:アニメーションの再生方向(順方向、逆方向など)
  • animation-play-state:停止中か実行中か
  • animation-fill-mode:アニメーション実行前後のスタイル適用について設定

必要なパラメタをピックアップして、animationで指定しましょう。

例として、サンプルの設定を見てみましょう。

animation: 2s ease-out 0s infinite running beat;
  • animation-duration:2s(2秒)
  • animation-timing-function:ease-out(終わりがゆっくり)
  • animation-delay:0s(遅延なし)
  • animation-iteration-count:infinite(再生回数無限)
  • animation-play-state:running(実行中)
  • animation-name:beat(名前)

指定していないものは、初期値が適用されています。

このようにして、@keyframesアニメーションを適用させます。

いずれ、各パラメタの詳細についてもまとめますので、お待ちください。

以上!

コメント

タイトルとURLをコピーしました