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上去下载，里面预设了不少种经常使用的动画，使用哪一种动画就把相应的类添加到元素上就好了。