アニメーションの動きを指定する

＠keyframes

＠keyframes 【 アットマーク・キーフレームス 】 アニメーション名 {キーフレーム{ 変化させるプロパティ: 値; } }

@keyframes規則はアニメーションの動きを指定する@規則です。animation-nameプロパティで指定したアニメーション名を参照し、各キーフレーム（経過点）ごとに変化させる要素のプロパティを指定します。また、animation-durationプロパティによる時間の指定は必須です。

モジュール CSS Animations Module Level 3

値の指定方法

アニメーション名

animation-nameプロパティで指定したアニメーション名を指定します。この名前が付与された要素のプロパティを変化させます。

キーフレーム

アニメーション全体における経過点を指定します。

%値 %値を指定します。10秒のアニメーションの場合は、30%が3秒時点、80%が8秒時点を示します。
from 開始点を指定します。0%と同値です。
to 終了点を指定します。100%と同値です。

変化させるプロパティ

各キーフレームにおいて変化させるプロパティを指定します。

値

変化させるプロパティの値を指定します。

サンプルコード

2015年1月時点では、Google Chrome、Safariなどでアニメーションを表示させるには接頭辞に-webkit-を記述します。 
 @keyframes bnr-animation{
  0% {width: 60px; background-color: #6cb371; }
  50% {width: 234px; height: 60px; background-color: #ffd700; }
  100% {width: 234px; height: 234px; background-color: #ff1493; }
}

使用例10秒間で変化するアニメーションを設定する

@keyframes bnr-animation {キーフレーム{ プロパティ: 値; } }

.box { animation-name : bnr-animation; animation-duration : 10s; }

以下の例では@keyframes規則を使って、「bnr-animation」（animation-nameプロパティで指定）というアニメーション名を参照し、対象となる要素の10秒間（animation-durationプロパティで指定）における背景色と幅、高さの変化を表しています。

@keyframes bnr-animation{
  0% {width: 60px; background-color: #6cb371; }
  50% {width: 234px; height: 60px; background-color: #ffd700; }
  100% {width: 234px; height: 234px; background-color: #ff1493; }
}
.box{
  width: 60px; height: 60px; background: #6cb371;
  animation-name: bnr-animation;
  animation-duration: 10s;}