@keyframesを使ったCSSアニメーションの基本的な使い方

2019-06-16CSS

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

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

@keyframesの基本的な書き方

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

キーフレーム名、実行時間、イージングやループ設定をanimationプロパティにて個別または一括で指定可能です。

.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)などを指定していきます。

@keyframesアニメーションを利用するには最低限、キーフレーム名とアニメーション時間(初期値が0のため)必要になります。

最低限の指定

animation: animName 5s;

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)が定義され2つある場合はアニメーション時間(animation-duration)とアニメーション開始時間(animation-delay)が定義されます。

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

アニメーションキーフレーム名(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-06-16CSSCSSアニメーション

Posted by Yousuke.U