如何在CSS3中使用Transition动画属性

这篇文章给大家介绍如何在CSS3中使用Transition动画属性，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

专注于为中小企业提供网站设计、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业特克斯免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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复制内容到剪贴板

2.   
     
     
         
         
         
           .animated_div {   
               margin: 100px auto;   
               width:100px;   
               height:60px;   
               background:#92B901;   
               /*简写属性*/   
               -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 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(360deg);   
               -webkit-transform: rotate(360deg);   
               -o-transform: rotate(360deg);   
               transform: rotate(360deg);   
               opacity:1;   
               background:#1ec7e6;   
               width:200px;   
               height:120px;   
           }