css3 animation 的基础认识.

浏览数：32 / 时间：2015年06月09日

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);}}