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( );
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1