今天小编跟大家讲解下有关CSS3中Transition动画属性用法详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3中Transition动画属性用法详解 的相关资料，希望小伙伴们看了有所帮助。
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
transition属性的值包括以下四个：
•transition-property： 指定对HTML元素的哪个css属性进行过渡渐变处理，这个属性可以是color、width、height等各种标准的css属性。•transition-duration：指定属性过渡的持续时间•transition-timing-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-in：(加速)，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、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。•transition-delay：指定延迟时间，也就是经过多长时间才开始执行过渡过程。浏览器兼容性
Internet Explorer 9 以及更早的版本，不支持 transition 属性。
Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 属性。Chrome 25 以及更早的版本以及Safari 需要前缀 -webkit-。
下面还是以实例来说明transition的用法
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>transition演示1</title> <styletype="text/css"> .animated_div{ margin:100pxauto; width:100px; height:60px; background:#92B901; -webkit-transition:-webkit-transform1s,opacity1s,background1s,width1s,height1s,font-size1s; 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(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); opacity:1; background:#1ec7e6; width:200px; height:120px; } </style> </head> <body> <divclass="animated_div"></div> </body> </html>上述代码当鼠标移到div上时，CSS属性：width,height,transform,background,opacity都发生渐变过渡效果。最终css样式变成.animated_div里定义的样式，过渡过程大致如下：
再给一个网上的嫦娥奔月的示例，要求：当鼠标移到图片上时，嫦娥出现，移开时嫦娥消失
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>transition演示2</title> <styletype="text/css"> body{ color:#fff; background:#000; } .change{ display:block; width:400px; height:400px; background:url(http://p3.qhimg.com/t0134c65e59012a1257.png)no-repeatcenter; background-size:cover; border:1emsolidrgba(255,255,255,.8); margin:50pxauto; } .changeimg{ display:block; width:300px; height:284px; opacity:0; -webkit-transform:translate(-100px,-100px); transform:translate(-100px,-100px); -webkit-transition:opacity1sease-in-out0.5s,-webkit-transform1sease-in-out; transition:opacity1sease-in-out0.5s,transform1sease-in-out; } .change:hoverimg{ -webkit-transform:translate(0px,0px); transform:translate(0px,0px); opacity:1; } </style> </head> <body> <ahref="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=http://xyrl.com/skin/7ke/image/nopic.gif <imgsrc="http://p4.qhimg.com/t0160e6a92121691e22.png"alt=""/> </a> </body> </html>为了使嫦娥有飘入飘出的效果，设置了transform属性，配合opacity属性，加入过渡效果就能达到效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱蒂网。
来源：爱蒂网
