🍓

CSSアニメーションを実装してみよう

に公開
CSS
animation
アニメーション
keyframe
tech

CSSアニメーションとは

CSSアニメーションは@keyframeとanimationプロパティと組み合わせることで実装できる
実際のサンプルを見てみよう

ボールが跳ねるアニメーション

@keyframe

@keyframeはアニメーションがどのように変化するかを指定できる
サンプルで書いた@keyframeは下のようなイメージ

@keyframes アニメーション名{
  0%{
    /*アニメーションが開始されるときのCSS*/
  }

  50%{
    /*アニメーションの中間のCSS*/
  }

  100%{
    /*アニメーションが終了するときのCSS*/
  }
}

0%~100%以外にもfrom~toで書くことも可能
つまり下の例で言うとanimation1とanimation2は同義

@keyframes animation1{
  from{
    /*アニメーションを開始するときのCSSを記述*/
  }

  to{
    /*アニメーションを終了するときのCSSを記述*/
  }
}

@keyframes animation2{
  0%{
    /*アニメーションを開始するときのCSSを記述*/
  }

  100%{
    /*アニメーションを終了するときのCSSを記述*/
  }
}

また、@keyframeのアニメーション適用タイミングは自由
先ほどのサンプルの@keyframeを少し自由に変えてみた
少しずつ跳ねる高さを低くするアニメーションができた

animation

animationでアニメーションの秒数や回数を指定できる
サンプルで使った.ballに指定されていたanimationプロパティを1つ1つ見ていく

  animation-name: animation;
  animation-duration: 2s;
  animation-iteration-count:infinite;

animation-name

animation-nameはアニメーションに名前をつけるプロパティ
半角英数字で任意の名前を指定し、@keyframeでその定義名に対してアニメーションの変化を指定する

animation-duration

animation-durationはアニメーションの秒数を指定するプロパティ
初期値は0sで、指定できる単位はs（秒）かms（ミリ秒）

animation-iteration-count

animation-iteration-countはアニメーションが何回ループするかを指定できるプロパティ
初期値は1回で、指定する数値の数だけアニメーションがループする
infiniteを指定すると無限にループする

animation-delay

animation-delayはアニメーションの開始を遅らせるプロパティ
初期値は0sで、指定できる単位はs（秒）かms（ミリ秒）
サンプルでは使っていなかったが、animation-delayを使うとこのようなアニメーションをすることができる

animationでまとめて指定

animationプロパティはこれらをまとめて指定することもできる

animation: animation 3s infinite 5s;
animation: 名前 アニメーションの秒数 ループの回数 開始までの秒数;

順番は特に指定はないが、先に記述した数値がdurationとなるので、durationとdelayについては順番に注意

まとめ

  • CSSアニメーションはanimationと@keyframesで実装できる
  • animation-nameでアニメーションの名前を定義
  • 定義したanimation-nameへ@keyframesでアニメーションを指定する

他にも様々なanimationプロパティがあって、いろんな表現ができるCSSアニメーション楽しい〜

Discussion