W3C标准中对css3的trans IT ion这是样描述的：[css的transition允许css的属性值在一定的时间区间内 平滑 地过渡。这种效果可以在鼠标单击、获得 焦点 、被点击或对元素任何 改变 中触发，并 圆 滑地以动画效果改变CSS的属性值。]
transition属性 的值包括以下四个：
&nbs p; •transition- PR o PE rty： 指定对HT ML 元素的哪个css属性进行过渡渐变处理，这个属性可以是color、width、h ei ght等各种标准的css属性。
•transition-duration：指定属性过渡的持续时间
•transition -t iming-function：指定渐变的速度：
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
3、ease -i n：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
6、c ub ic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
•transition-delay：指定延迟时间，也就是经过多长时间才 开始 执行过渡过程。
浏览器兼容性
internet E xp lorer 9 以及更早的版本，不支持 transition 属性。
Internet Explorer 10, Firefox, opera 和 Ch rom e支持transition 属性。C hr ome 25 以及更早的版本以及Safari 需要前缀 - webkit -。
下面还是以实例来说明transition的用法
XM L/HTML Code 复制内容到剪贴板
<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > transition演示1 </ title > < style type = "text/css" > .ani MATE d_div { ;m arg in: 100px auto; width:100px; height:60px; background: # 92B901; /*简写属性*/ -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font -s ize 1s; /* Safari */ /*每个属性分开写*/ transition-property:width,height,transform,background,opacity; transition-duration:1s,1s,1s,1s,1s,1s; -webkit-border-radius:5px; border-radius:5px; opacity:0.4; } .animated_div:hover { -moz-transform: rotate( 360 deg ); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity:1; background:#1ec7e6; width:200px; height:120px; } </ style > </ head > < body > < div class = "animated_div" > </ div > </ body > </ html >
上述代码当鼠标移到div上时，CSS属性：width,height,transform,background,opacity都发生渐变过渡效果。最终css样式变成.animated_div里定义的样式，过渡过程大致如下：
再给一个网上的嫦娥奔月的示例，要求：当鼠标移到图片上时，嫦娥出现，移开时嫦娥 消失
XML/HTML Code 复制内容到剪贴板
<!DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title > transition演示2 </ title > < style type = "text/css" > body{ color: #fff; background:#000; } .change{ dis play :block; width:400px; height:400px; background:url(http:// P3 .qh img .COM /t0134c65e59012a1257.png) no-repeat center ; background-size :cover; border:1em solid rgba(255,255,255,.8); mar gin :50px auto; } .change img{ display:block; width:300px; height:284px; opacity:0; -webkit-transform:translate(-100px,-100px); transform:translate(-100px,-100px); -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out; transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out; } .change:hover img{ -webkit-transform:translate(0px,0px); transform:translate(0px,0px); opacity:1; } </ style > </ head > < body > < a href = "http://image.haosou测试数据/i?q=%E5%AB%A6%E5%A8%A5png& am p;src=tab_www" class = "change " target = "_blank" > < img src = "http://p4.qhimg测试数据/t0160e6a92121691e22.png" alt = "" /> </ a > </ body > </ html >
为了使嫦娥有飘入飘出的效果，设置了transform属性，配合opacity属性，加入过渡效果就能达到效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 CSS3中Transition动画属性用法详解 全部内容，希望文章能够帮你解决 CSS3中Transition动画属性用法详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3中Transition动画属性用法详解的详细内容...