css3动画简介

明天放国庆节了，今天无心工作，只想划水.......更个博客希望时间过的快一点 逃:)

大致会讲一下css3的动画，ie9和更早的ie不支持css3动画，其他浏览器都可以很好的兼容，动画是提升用户体验的重要途径。

广义上来讲css3动画分成两种。

过渡动画

简介

从初始状态（大小、位置、颜色、变形【transform】等）过渡到结束状态的动画，只能定义首尾两个状态，是最简单的一种动画。

参数

要是一个元素产生动画，需要在transition属性定义参数。

transition-property: 规定对那个属性进行过渡

transition-duration: 定义过渡的时间，默认是0

transtiton-timing-function: 定义过渡动画的缓动效果，淡入、淡出等，默认是ease

transition-delay: 规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0

div {
  transition-property: width; //对宽度进行过渡
  transtition-duration: 3s;  //过渡时间是3s
  transition-timing-function: ease;
  transition-delay: 3s;  
}

为了方便，有的时候可以把这四个属性按照上面的顺序房子一个transition属性上面（默认值可以省略，过渡多个属性值可以用逗号隔开）：

div{transtion: width 3s ease 3s}

使用transition属性只是规定了要如何去过渡，动画发生需要元素状态的改变。

关键帧动画

这种不像第一种只能定义首尾两个状态，关键帧动画可以定义多个状态，可以定义任意多的关键帧，实现更复杂的动画效果。

使用@keyframes来定义动画。具体格式为：

@keyframes 动画名称{

　　时间点{元素状态}

　　时间点{元素状态}

　　...

}

现在我们知道了怎么去定义一个关键帧动画了，实现的话就是把这个动画绑定到某个要进行动画的元素上就可以了。

把动画绑定到元素上，可以使用animation属性。比如：

有时候会存在浏览器兼容问题，在实际书写代码的时候，必须加上浏览器的私有前缀

--------------------------------------------------------------------------------------------------------------------

animate.css

animate.css是一个css3动画库，可以到github上去下载，里面预设了很多种常用的动画，使用哪种动画就把相应的类添加到元素上就行了。