【CSS】キーフレーム(@keyframes)の基本的な使い方

2019年4月8日CSS

CSSアニメーションでキーフレーム(@keyframes)を使う方法と簡単なサンプルです

See the Pen Flowing Text CSS Animation by yochans (@yochans) on CodePen.

キーフレーム(@keyframes)の基本的な書き方

キーフレーム(@keyframes)の基本的な書き方は要素にanimationをキーフレーム名を指定して、指定したキーフレーム名の@keyframesを記述します

.box{
  animation: animName 5s alternate infinite;
}

@keyframes animName {
 /*アニメーション内容*/
}

animationプロパティ

animationプロパティの指定方法

animation:はキーフレーム名(animation-name)、アニメーション時間(animation-duration)、アニメーション開始時間(animation-delay)、動きの種類・イージング (animation-timing-function)アニメーションの再生方向(animation-direction)、 繰り返し回数(animation-iteration-count)などを指定していきます

最低限必要なものはキーフレーム名とアニメーション時間(初期値が0のため)です

animation: animName 5s linear infinite;

animationで指定可能なプロパティと値

プロパティ指定可能な値初期値
animation-name任意の英数字なし
animation-durationアニメーションにかける時間、秒で指定0
animation-timing-function動きの種類・イージング
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps()
cubic-bezier()
ease
animation-delayアニメーション開始までの時間、秒で指定0
animation-iteration-count繰り返し回数、数値で指定またはinfinite(無限)1
animation-directionアニメーションの再生方向
normal(通常再生)
reverse(逆再生)
alternate(通常再生後、逆再生)
alternate-reverse(通常再生後、逆再生)
normal
animation-play-state状態
running
paused
running

animationプロパティの記述する順番

秒という同じ値を持つアニメーション時間(animation-duration)とアニメーション開始時間(animation-delay)は、1つ目がアニメーション時間(animation-duration)2つ目がアニメーション開始時間(animation-delay)となります

ひとつのみの場合は、アニメーション時間(animation-duration)が定義されます

それ以外のプロパティ値の記述に決まった順序はなく、正常に実行されます

アニメーションキーフレーム名(animation-name)も先頭に記述する必要はありませんが、他のプロパティの値に使われる文字列は利用できません

また、アニメーションキーフレーム名(animation-name)記述以降に各プロパティで利用されない不明な値が記述されているとアニメーションは実行されません

animationプロパティの個別指定

それぞれ個別に指定することも可能です

animation-name: animName;
animation-duration: 5s;
animation-delay: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: paused;

@keyframes

@keyframesでanimationで指定してアニメーションキーフレーム名にアニメーション内容を作成します

@keyframesでfrom、toを使ったサンプル

@keyframes animName {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

fromはアニメーション最初の値、toが最後の値になります

最初の値がセレクタで定義されている場合、fromを省略できる場合もあります

@keyframesでキーフレームを使ったサンプル

%を指定して、アニメーションのタイミングを細かく制御する事が可能です

fromは0%、toは100%という感じです

@keyframes animName {
 0%{
     width: 0%;
   }
50%{
      width: 30%;
   }
100%{
     width: 100%;
   }
}

上記の場合、50%の段階でのwidthが100%時の半分以下になっているので、アニメーションする速度に緩急がつきます

もっとも単純な緩急であれば、animation-timing-functionを指定した方が良い場合も多いです

See the Pen CSS keyframes 2 by yochans (@yochans) on CodePen.

@keyframesの要点

  • 同じ値のキーが存在する場合、最後に宣言されたものが使用される
  • javaScriptによるアクセスは可能
  • %とfrom、toの混在は可能(0%と100%の代用なら)
  • !importantは無視される
  • 同じ@keyframesを複数のセレクタで指定できる
  • 同じセレクタから複数の@keyframesも指定可能(別記事参照)

2019年4月8日CSSCSSアニメーション

Posted by ヨウスケ