CSS学习笔记：transition

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

1、transition的属性值。

语法：

   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）实现鼠标悬停后，模块直角变圆角的过渡动画。

    

  .img {
          width: 200px;;
          height: 200px;
          border: 10px solid #fff;
          -webkit-border-radius: 15px;
          border-radius: 15px;
          overflow: hidden;
          float: left;
          margin-left: 20px;
      }
      .img:hover {
          cursor: pointer;
      }
      .border {
          -webkit-transition: all 1s ease;
          -moz-transition: all 1s ease;
          -ms-transtion: all 1s ease;
          -o-transition: all 1s ease;
          transition: all 1s ease;
      }
      .border:hover {
          border:10px solid #fff;
          border-radius: 50%;
          -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
      }

 <div class="border img">
     <img src="img/7.jpg" alt=""/>
 </div>

（2）实现鼠标悬停后，DIV内的图片放大的效果。

     

 .zoom img {
      width: 200px;
      height: 200px;
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -ms-transition: all 2s ease;
      -o-transition: all 2s ease;
      transition: all 2s ease;
 }

 .zoom img:hover {
       width: 300px;
       height: 300px;
 }
 .zoom:hover {
      -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
      -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
      box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
 }

 <div class="zoom img">
     <img src="img/14.jpg" alt=""/>
 </div>

（3）悬停后，模块旋转。

    

 .rotate {
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }

 .rotate:hover {
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -ms-transform: rotate(10deg);
   -o-transform: rotate(10deg);
    transform: rotate(10deg);
   -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
   -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
    box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
 }

 <div class="rotate img">
     <img alt="" src="img/15.jpg" />
 </div>