CSS学习笔记：transition

浏览数：49 / 时间：2015年06月09日

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>