CSS3动画（animation @keyframes）

CSS3 @keyframes 规则：

• 在使用@keyframes创建动画时，如果不绑定到选择器，则不会出现动画效果；
• 至少要规定两个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