标签：
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
1、transition的属性值。
语法：
1 transition ： [<‘transition-property‘> || <‘transition-duration‘> || <‘transition-timing-function‘> || <‘transition-delay‘> [, [<‘transition-property‘> || <‘transition-duration‘> || <‘transition-timing-function‘> || <‘transition-delay‘>]]*
transition主要包含四个属性值：transition-property（执行变换的CSS属性）,transition-duration（变换持续时间）,transition-timing-function（变换速率变化）transition-delay（变换延迟时间）。
transition-property:主要有none、all以及特定的CSS属性，比如width/height/top/left/right等数值型属性，color值等。
transition-duration：默认为0，用户可以自行设定，比如0.5s。
transition-timing-function：这里主要有ease（逐渐变慢）、linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）、cubic-bezier。
transition-delay：动画过渡延迟时间，用户自行设定，默认为0。
2、简单动画演示
（1）实现鼠标悬停后，模块直角变圆角的过渡动画。
1 .img { 2 width: 200px;; 3 height: 200px; 4 border: 10px solid #fff; 5 -webkit-border-radius: 15px; 6 border-radius: 15px; 7 overflow: hidden; 8 float: left; 9 margin-left: 20px; 10 } 11 .img:hover { 12 cursor: pointer; 13 } 14 .border { 15 -webkit-transition: all 1s ease; 16 -moz-transition: all 1s ease; 17 -ms-transtion: all 1s ease; 18 -o-transition: all 1s ease; 19 transition: all 1s ease; 20 } 21 .border:hover { 22 border:10px solid #fff; 23 border-radius: 50%; 24 -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1); 25 } 26 27 <div class="border img"> 28 <img src="img/7.jpg" /> 29 </div>
（2）实现鼠标悬停后，DIV内的图片放大的效果。
1 .zoom img { 2 width: 200px; 3 height: 200px; 4 -webkit-transition: all 2s ease; 5 -moz-transition: all 2s ease; 6 -ms-transition: all 2s ease; 7 -o-transition: all 2s ease; 8 transition: all 2s ease; 9 } 10 11 .zoom img:hover { 12 width: 300px; 13 height: 300px; 14 } 15 .zoom:hover { 16 -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1); 17 -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1); 18 box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1); 19 } 20 21 <div class="zoom img"> 22 <img src="img/14.jpg" /> 23 </div>
（3）、悬停后，模块旋转。
1 .rotate { 2 -webkit-transition: all 0.3s ease; 3 -moz-transition: all 0.3s ease; 4 -o-transition: all 0.3s ease; 5 -ms-transition: all 0.3s ease; 6 transition: all 0.3s ease; 7 } 8 9 .rotate:hover { 10 -webkit-transform: rotate(10deg); 11 -moz-transform: rotate(10deg); 12 -ms-transform: rotate(10deg); 13 -o-transform: rotate(10deg); 14 transform: rotate(10deg); 15 -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1); 16 -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1); 17 box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1); 18 } 19 20 21 <div class="rotate img"> 22 <img src="img/15.jpg" /> 23 </div>
标签：
原文地址：http://www.cnblogs.com/lonelybonze/p/4445687.html
