css3 animation 的基础认识.

css3 中的 animation属性主要用来作动画的,详细的文章看:http://www.w3cplus.com/content/css3-animation

调用animation的方法:animation-name(动画名称) animation-duration(播放动画的总时长) animation-timing-function(动画的播放方式:

　　ease  ease-in  ease-in-out

　　linear  cubic-bezier　　

) animation-delay(动画开始执行时间) animation-iteration-count(循环次数) ...

 

在开始介绍Animation以前咱们有必要先来了解一个特殊的东西，那就是"Keyframes",咱们把他叫作“关键帧”，

玩过flash的朋友可能对这个东西并不会陌生。下面咱们就一块儿来看看这个“Keyframes”是什么东西。前面咱们

在使用transition制做一个简单的transition效果时，咱们包括了初始属性和最终属性，一个开始执行动做时间

和一个延续动做时间以及动做的变换速率，其实这些值都是一个中间值，若是咱们要控制的更细一些，好比说我

要第一个时间段执行什么动做，第二个时间段执行什么动做（换到flash中说，就是第一帧我要执行什么动做，第

二帧我要执行什么动做），这样咱们用Transition就很难实现了，此时咱们也须要这样的一个“关键帧”来控制。那

么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。下面咱们一块儿先来看看Keyframes:

Keyframes具备其本身的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对

花括号“{}”，括号中就是一些不一样时间段样式规则，有点像咱们css的样式写法同样。对于一个"@keyframes"中

的样式规则是由多个百分比构成的，如“0%”到"100%"之间，咱们能够在这个规则中建立多个百分比，咱们分别给

每个百分比中给须要有动画效果的元素加上不一样的属性，从而让元素达到一种在不断变化的效果，好比说移动，改

变元素颜色，位置，大小，形状等，不过有一点须要注意的是，咱们可使用“fromt”“to”来表明一个动画是从哪开始

，到哪结束，也就是说这个 "from"就至关于"0%"而"to"至关于"100%",值得一说的是，其中"0%"不能像别的属性

取值同样把百分比符号省略，咱们在这里必须加上百分符号（“%”）若是没有加上的话，咱们这个keyframes是无效

的，不起任何做用。由于keyframes的单位只接受百分比值。

 

下面贴上一个简单的动画效果样式(当鼠标移动到图片上面时图片会扭曲放大缩小效果):

/**
　　本代码不是原创,只是进行了些修改,谢谢原做者的贡献
*/
img:hover{
    -webkit-animation: tada 1s .2s ease both;
    -moz-animation: tada 1s .2s ease both;
}
@-webkit-keyframes tada{
    0%{-webkit-transform:scale(1);}
    10%, 20%{-webkit-transform:scale(0.5) rotate(10deg);}
    30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(-10deg);}
    40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(10deg);}
    100%{-webkit-transform:scale(1) rotate(0);}
}
@-moz-keyframes tada{0%{-moz-transform:scale(1);}
10%, 20%{-moz-transform:scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90%{-moz-transform:scale(1.1) rotate(3deg);}
40%, 60%, 80%{-moz-transform:scale(1.1) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}}