CSS3中的动画基础

CSS3动画
一、.keyframes
    命名是由"@keyframes"开头，后面接着是这个“动画的名称”和{}（@keyframes name{})，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。
二、animation
    1、animation-name:
    nimation-name:是用来定义一个动画的名称，是由Keyframes创建的动画名，换句话说此处的name要和Keyframes中的动画名一致，如果不一致,将不能实现任何动画效果；
    2、animation-duration：
    animation-duration是用来指定元素播放动画所持续的时间长；
    3、animation-timing-function:    
    是指元素根据时间的推进来改变属性值的变换速率；
    4、animation-delay:
    是用来指定元素动画开始时间
    5、animation-iteration-count：
    是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。
    6、animation-direction
    是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，下一周期逆向播放。