CSS 3@keyframesルール:

@keyframesを使用してアニメーションを作成する場合、セレクタにバインドしないとアニメーション効果は現れません.

アニメーションをセレクタにバインドするには、少なくとも2つのcssプロパティを指定します.

規定アニメーションの名称

アニメーションの時間長を規定する

「myfirst」アニメーションをdiv要素にバンドルします.時間:5秒

div{
    animation: myfirst 5s;
  -moz-animation: myfirst 5s; /* Firefox */
  -webkit-animation: myfirst 5s; /* Safari   Chrome */
  -o-animation: myfirst 5s; /* Opera */
}

説明:長さを定義しない場合、既定値は0で、アニメーション効果は表示されません.
例:

    



    
  ：    Internet Explorer    。

    

说明：

• 用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
• 0% 是动画的开始，100% 是动画的完成。
• 但是为了得到最佳的浏览器支持，建议始终定义 0% 和 100% 选择器。

CSS3动画属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写，除了animation-paly-state
animation-name	规定@keyframes动画的名字
animation-duration	动画完成一个周期说话的时间 单位毫秒，默认为0
animation-timing-function	规定动画的运动曲线 默认为ease
animation-delay	规定动画何时开始
animation-interation-count	规定动画运动次数 默认1
animation-direction	规定动画是否在下一周期逆向运动 默认normal
animation-play-state	规定动画运行与否 默认running
animation-full-mode	规定动画时间外的状态

说明：

• animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

如下，分别应用了的CSS3属性

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Firefox: */
    -moz-animation-name: myfirst;
    -moz-animation-duration: 5s;
    -moz-animation-timing-function: linear;
    -moz-animation-delay: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-play-state: running;
    /* Safari   Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    /* Opera: */
    -o-animation-name: myfirst;
    -o-animation-duration: 5s;
    -o-animation-timing-function: linear;
    -o-animation-delay: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;
    -o-animation-play-state: running;
}

以下のように略記されています.

div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Firefox: */
    -moz-animation: myfirst 5s linear 2s infinite alternate;
    /* Safari   Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
    /* Opera: */
    -o-animation: myfirst 5s linear 2s infinite alternate;
}

注:セレクタの名前に-がある場合は、アニメーションから削除します.たとえば、次のように書きます.

.fa-3x{
    margin-top: -15px;
    -webkit-animation: fa3x 2s ease-in infinite; /* Chrome, Safari, Opera */
    animation: fa3x 1s infinite;
}

@-webkit-keyframes fa3x {
    0% {margin-top: -15px;}
    50% {margin-top: -5px;}
    100% {margin-top: -15px;}
}

@keyframes fa3x {
    0% {margin-top: -15px;}
    50% {margin-top: -5px;}
    100% {margin-top: -15px;}
}

参考資料:http://www.w3school.com.cn/css3/css3_animation.asp