W3C标准中对css3的transition这是样描述的Word文档下载推荐.docx

1、 none | all | , , * transition-duration是用来指定元素 转换过程的持续时间，取值：为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。三、transition-timing-function: transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier（, ） , ease | linear | ease-in | ease-out | ease-in-out |

2、cubic-bezier（durationanimation typedelay如下图所示：相对应的一个示例代码：p all .5s ease-in-out 1s;浏览器的兼容性:因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE 全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用 transition时我们有必要加上各自的前缀，最好在放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的 transi

3、tion属性，那么这种效果就会自动加上去：/Mozilla内核 -moz-transition ： /Webkit内核 -webkit-transition ： /Opera -o-transition ： /W3C 标准通过上面，我想大家对CSS3的Transition属性的使用有一定的概念存在了，下面为了加强大家在这方面的使用，我们一起来看下面的DEMO。我们通过实践来巩固前面的理论知识，也通过实践来加强transition的记忆。DEMO一：DEMO一我们主要是在一个div中放置了几个小块，分别是对应了transition-timing-function中的几种类型，我们在 div的ho

4、ver状态下，改变其部分属性，从而达到一种动画效果。我们也可以使用jq来点击一个按钮，触发这个div（说简单点就是通过按钮的点击事件 给这个div加上一个class，让其子元素都触发相对应的transition动画效果），为了让大家能更好的学习和理解，我把相应的代码贴在这里，感 兴趣的朋友就跟着做一下吧，也可以直接把代码复制到你本地页面运行查看效果。Html Code:a id=timings-demo-btnclickdiv id=timings-demoease class=demo-boxEaseease-inEase-inease-outEase-outease-in-outEase-

5、in-outlinearLinearcubic-bezierCubic-bezierCSS Code: #timings-demo border: 1px solid #ccc; padding: 10px; height: 400px; width: .demo-box 100px; 50px; text-align: center; line-height: color: #fff; background: #96c; -moz-border-radius: 5px; -webkit-border-radius: border-radius: -moz-box-shadow: inset

6、0 0 5px rgba（102, 153, 0,0.5）; -webkit-box-shadow: box-shadow: margin-bottom: /ease效果： #ease all 5s ease 0.3s; #f36; /ease-in效果： #ease-in all 3s ease-in 0.5s; #369; /ease-out效果： #ease-out all 5s ease-out 0s; #636; /ease-in-out效果： #ease-in-out all 1s ease-in-out 2s; #3e6; /linear效果： #linear all 6s li

7、near 0s; #999; /cubic-bezier效果： #cubic-bezier all 4s cubic-bezier 1s; #6d6; /hover状态下或单击click按钮后demo-box产生属性变化 #timings-demo.timings-demo-hover .demo-box, #timings-demo:hover .demo-box -moz-transform: rotate（360deg） scale（1.2）; -webkit-transform: -o-transform: transform: 1px solid rgba（255,230,255,08）; 25px; margin-left: 280px; 30px; 15px;使用单击事件给dimings-demo加上一个timings-demo-hover的class名，使用demo-bxo产生属性变化 $（document）.ready（function（） $（#timings-demo-btn）.toggle（ function（） $（this）.next（div#timings-demo）.addClass（timings-demo-hover）; ,function（）.removeClass（ ）;