CSS tranistions允许元素的属性在单位时间内发生平滑的过渡，在阅读完《CSS Transitions Module Level 3》之后，我已经被其所吸引。尽管目前只有Chrome和safari浏览器支持该属性(不过目前还得使用-webkit内核关键字作为前缀)，但相信在不久的将来，各主流浏览器会全面支持该属性。
通常情况下，当CSS属性发生改变时，元素会立刻发生改变。CSS transtions提供一种方法使得元素从原始状态平滑的过渡到新的状态。只需要对元素定义要使用Transition效果的属性(Transition-property)、Transition效果的过渡时间(Transition-duration)、Transition效果的过渡方式(Transition-timing-function)以及Transition效果何时开始(Transition-delay)。在详细了解这些属性之后，我作了一个简单的测试(如下)，虽说简单，但总能鼓动人心。
提示：可修改后代码再运行!
我只是定义一个绝对居中的盒子，在鼠标滑过时将其放大，在Chrome中我们会看到平滑的过渡效果。CSS规则如下：
.Transition{opacity:0.2;
position:absolute;
left:-65px;
top:-65px;
left:50%;
top:50%;
border:1px solID #000;
background-color:#f00;
padding:30px;
wIDth:100px;
height:100px;
-webkit-Transition-property:opacity,border-wIDth;
-webkit-Transition-duration:1s;
-webkit-Transition-timing-function:ease-in-out;
}
.Transition:hover{
wIDth:300px;height:300px;border-wIDth:3px;margin-top:-195px;margin-left:-195px;opacity:1;padding:90px;
}
在-webkit-Transition-property定义了使用过渡效果的属性，-webkit-Transition-duration定义过渡持续的时间，这里我定义的1s。W3c的规则中说明，当把-webkit-Transition-duration的属性值定义为0时，将不会出现平滑的过渡。-webkit-Transition-timing-function定义了过渡的方式，这里是ease-in-out，关于其它方式，可以参看文档说明。有了这样一个属性之后，用户可以得到良好的体验，我们也不必要在为实现这样的平滑的效果而去写大量的Js。下面我构建一个Image gallery，来看看该属性所带来的用户体验。
如何排列图片，我不赘述。熟悉CSS的人都很清楚怎么做，我只介绍实现Transition效果的核心CSS代码。
.imagegallery li img{
wIDth:200px;
height:136px;
border:1px solID #000;
position:relative;
z-index:1000;
-webkit-Transition-property:wIDth,border,left,top,z-index;
-webkit-Transition-duration:1s;
-webkit-Transition-timing-function:ease-in-out;
.}
.imagegallery li a:hover{_background-color:#fff;_z-index:5000;_position:relative;}
.imagegallery li a:hover img{
border:2px solID #000;
wIDth:600px;
height:408px;
margin-left:-301px;
margin-top:-255px;
left:50%;
top:50%;
z-index:5000;
}
在-webkit-Transition-property定义了使用过渡效果的属性，-webkit-Transition-duration定义过渡持续的时间，这里我定义的1s。W3c的规则中说明，当把-webkit-Transition-duration的属性值定义为0时，将不会出现平滑的过渡。-webkit-Transition-timing-function定义了过渡的方式，这里是ease-in-out，关于其它方式，可以参看文档说明。有了这样一个属性之后，用户可以得到良好的体验，我们也不必要在为实现这样的平滑的效果而去写大量的Js。下面我构建一个Image gallery，来看看该属性所带来的用户体验。
如何排列图片，我不赘述。熟悉CSS的人都很清楚怎么做，我只介绍实现Transition效果的核心CSS代码。
.imagegallery li img{
wIDth:200px;
height:136px;
border:1px solID #000;
position:relative;
z-index:1000;
-webkit-Transition-property:wIDth,z-index;
-webkit-Transition-duration:1s;
-webkit-Transition-timing-function:ease-in-out;
}
.imagegallery li a:hover{_background-color:#fff;_z-index:5000;_position:relative;}
.imagegallery li a:hover img{
border:2px solID #000;
wIDth:600px;
height:408px;
margin-left:-301px;
margin-top:-255px;
left:50%;
top:50%;
z-index:5000;
}
上面的.imagegallery li a:hover那行代码以及.imagegallery li的overflow属性，主要修复ie6下的BUG。给imagegallery li定义overflow:hidden，可以看到很有趣的效果。
看看最终结果，可以看到，我们再也不必为这样一个平滑的过渡效果而去写大量的Js了，期待CSS Transition能很快得到主流浏览器的支持。
最终结果：
提示：可修改后代码再运行!
以上是内存溢出为你收集整理的用css3 tranistions实现平滑过渡全部内容，希望文章能够帮你解决用css3 tranistions实现平滑过渡所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）