animation属性——css3动画效果

animation               css动画属性
一、animation实现动画效果主要由两部分组成：
1、通过类似flash动画中关键帧声明一个动画

2、在animation属性中调用关键帧声明的动画

二、主要步骤
1、关键帧属性 @keyframes 声明一个关键帧属性的动画
例如，在css中书写以下代码
@keyframes myani{
        0%{
            background-color:white;
        margin-left:0px;
    }
    50%{
            background-color:black;
        margin-left:100px;
    }
    100%{
            background-color:white;
        margin-left:0px;
    }
}
上面的示例效果还可以合并，用逗号隔开，如下所示：
eg. @keyframes myani{
        0%,100%{
            background-color:white;
        margin-left:0px;
    }
    50%{
            background-color:black;
        margin-left:100px;
    }
}
0%指的是动画起始的位置；100%指的是动画结束的位置
创建关键帧动画，还可以使用关键字
eg. @keyframes myani{
        from{
            background-color:white;
        margin-left:0px;
    }
    to{
            background-color:black;
        margin-left:100px;
    }
}
2、创建animation-name        目的：调用关键帧动画
属性值有两个：
none            默认值，没有指定任何动画
INDEX           是由 @keyframes指定创建的动画名称
eg. div{
        animation-name:myani;
}
3、animation-duration       设置动画播放的时间
eg. div{
        animation-name:myani;
    animation-duration：1s;
}
4、animation-timing-function   设置缓动
属性值请参考transition-timing-function的属性值
5、animation-delay          设置延迟时间
eg. div{
        animation-name:myani;
    animation-duration：1s;
    animation-delay：1s;
}
6、animation-iteration-count    设置循环次数
属性值有两个，如下所示：
次数              默认值为1
infinite          表示无限次循环
eg. div{
        animation-name:myani;
    animation-duration：1s;
    animation-delay：1s;
    animation-iteration-count：infinite；
}
7、animation-direction          设置播放动画的方向进行交替
属性值有两个，如下所示：
normal            默认值，每次正序播放
alternate         一次正序播放、一次逆序播放，如此循环
解析：假如动画播放是由快到慢，若设置normal，便一直是由快到慢；若设置alternate，则会先
由快到慢，然后再由慢到快，如此循环。
8、animation-play-state         设置动画停止/开始播放
属性值如下所示：
paused            规定动画已停止
running           规定动画正在播放
eg. div{
        animation-name:myani;
    animation-duration：1s;
    animation-delay：1s;
    animation-play-state：paused;     动画不进行播放
}
9、animation-fill-mode          设置动画在播放之前或之后，其动画效果是否可见
该属性可设置多个属性值，由逗号分隔，属性值如下所示：
none              默认值，表示按照预期进行和结束
forwards          动画结束后继续应用最后关键帧的位置，既不返回
backforwards      动画结束后迅速应用起始关键帧位置，即返回
both              根据情况产生forwards或backforwards的效果
//这个both属性和动画执行的次数有关，即于animation-iteration-count有关，动画停在
哪就是哪（开头或结尾）
10、animation简写形式
eg. div{
        animation:myani 1s ease 2 alternate 0s both;
}
animation子属性的顺序为：animation-name、animation-duration、animation-timing-function、
animation-iteration-count、animation-direction、animation-delay、animation-fill-mode

注意：animation的使用需要浏览器的版本较高，使用的话，需要在标准格式前面加上带前缀的格式。