animation プロパティによるアニメーションのフレームを定義します。name に animation-name プロパティで指定するフレーム名を定義します。下記の例では、赤から青に変わるフレームを定義しています。アニメーションに関する概要は animation を参照してください。

@keyframes myframe {
  from {
    color: red;
  }
  to {
    color: blue;
  }
}

次の例では、最初(0%) 50×0px の赤、途中(50%) 50×50px の青、最後(100%) 100×50px の緑の矩形をアニメーションで描画するフレームを定義しています。from は 0%、to は 100% と同じ意味を持ちます。

@keyframes myframe {
  from {
    width: 50px;
    height: 0px;
    background: red;
  }
  50% {
    width: 50px;
    height: 50px;
    background: blue;
  }
  to {
    width: 100px;
    height: 50px;
    background: green;
  }
}

@keyframes myframe {
  from {
    width: 50px;
    height: 0px;
    background: red;
  }
  50% {
    width: 50px;
    height: 50px;
    background: blue;
  }
  to {
    width: 100px;
    height: 50px;
    background: green;
  }
}
.test {
  animation: myframe 2s infinite both;
}

<div class="test"></div>

• http://www.w3.org/TR/css3-animations/#keyframes
• https://developer.mozilla.org/ja/docs/Web/CSS/%40keyframes
• http://caniuse.com/#feat=css-animation