概要

｢@keyframes｣は、アニメーションを定義するCSSプロパティ animation を使用する際に、アニメーションの開始から終了までの動作を指定する際に使用します。この中では様々なCSSプロパティを指定することができ、詳細なアニメーション表現が可能になりました。アニメーションの詳細は、animation を参照してください。

<div class="box animation"></div>
<style>
.box {
  width: 50px;
  height: 50px;
  background-color: #def;
}
.animation {
  animation: move 2s alternate infinite;
}
@keyframes move {
  0% {
    position: relative;
    top: 0;
    left: 0;
  }
  100% {
    position: relative;
    top: 0;
    left: 100px;
  }
}
</style>

取りうる値

アニメーションをさせたい任意の名前を指定します。この中のパーセントは0%から100%の間で幾つでも細かく指定することが可能です。もしくは、from~toで指定します。

ただし、細かい指定をすればするほど、閲覧するブラウザのパフォーマンスに影響しますので使用する際には気にかけておきたいポイントです。

@keyframes 任意の名前 {
  0%（from） {
    cssを指定
  }
  100%(to) {
    cssを指定
  }
}

またアニメーションができないCSSプロパティを指定した場合はそのプロパティは無視されます。またkeyframesに指定した名前が重複した場合、後に宣言されたものが適用されます。

使用例

初めの紹介した例を拡張してみましょう。0%と100%の間にポイントを追加し、CSSプロパティも追加してみました。ショートハンドプロパティの animation で指定している内容は、アニメーション名を指定する animation-name、アニメーションの期間を指定する animation-duration、アニメーション反転再生を行うかを指定する animation-direction、アニメーションの繰り返し回数を指定する animation-iteration-count を使用しています。

<div class="box animation"></div>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: #def;
  }
  .animation {
    animation: move 2s alternate infinite;
  }
  @keyframes move {
    0% {
      position: relative;
      top: 0;
      left: 0;
    }
    25% {
      position: relative;
      top: 0;
      left: 100px;
      width: 150px;
      height: 150px;
    }
    50% {
      position: relative;
      top: 0;
      left: 0;
    }
    75% {
      position: relative;
      top: 0;
      left: 100px;
    }
    100% {
      position: relative;
      top: 0;
      left: 100px;
    }
  }
</style>

仕様書

• CSS Animations Level 3

 

関連CSSプロパティ

• @keyframes