CSS3高级特效

一：过渡效果

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

1、

浏览器兼容性

属 性 名 IE 火狐 谷歌 Opera Safari

transition 10+ 4.0+ 4.0+ 10.5+ 3.1+

背一下

transition-property 过渡或动态模拟的CSS属性

transition-duration 完成过渡所需要的时间，单位为秒（s）

transition-timing-function 指定过渡函数，通过给过渡添加一个函数来指定动画的快慢方式

transition-delay 过渡开始出现的延迟时间，

all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

例：

注：

linear 规定以相同速度开始至结束的过渡效果

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

ease-in 规定以慢速开始的过渡效果

ease-out 规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

2、CSS3动画

浏览器支持

属  性  名    IE    Firefox    Chrome    Opera    Safari

animation    10+    5.0+        4.0+        12+        4.0+

设置关键帧

@keyframes spread {

   0% {width:0;}

   33% {width:23px;}

   66% {width:46px;}

   100% {width:69px;}

}

@keyframes的浏览器兼容性

属  性  名    IE    Firefox    Chrome    Opera    Safari

@keyframes    10+     5.0+    4.0+        4.0+        12.0+

写兼容的时候浏览器前缀是放在@keyframes中间

例如：@-webkit-keyframes、@-moz- keyframes

 animation–duration 过渡时间

animation-timing-function 过渡方式

animation-delay  延迟时间

animation-iteration-count 动画的播放次数

animation-direction  动画的播放方向

动画的播放次数（animation-iteration-count）

值通常为整数，默认值为1

特殊值infinite，表示动画无限次播放

动画的播放方向（animation-direction）

normal，动画每次都是循环向前播放

alternate，动画播放为偶数次则向前播放

练习：

 

3、使用animate动画库