transition

transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。transition包含4个属性值：执行变换的属性：transition-property，变换延续的时间：transition-duration，变换的速率变化：transition-timing-function，变换的延迟时间：transition-delay：

• transition-property的取值包含none（没有属性改变），all（所有属性改变），indent（元素属性名,包括color,length,percentage,integer,number,transform,rectangle,visibility,shadow,gradient,SVG,space-separated list of above,a shorthand property）；
• transition-duration的默认值是0 ，即变化是即时的，单位是s或者ms，包括:before和:after伪元素；
• transiton-timing-function的取值包含ease(逐渐变慢，默认值)，linear（匀速），ease-in（加速），ease-out（减速），ease-in-out（加速然后减速），cubic-bezier(可以自定义时间曲线)；
• transition-delay：同transition-duration,当只写了一个时间的时候，代表的是变换延续的时间。

在实际运用中，想要同时改变多个css属性时，可以把几个transition的声明写在一起，中间用逗号隔开，例如transition：background 0.5s ease-in,color 0.3s ease-out。

 #timings-demo {
     border: 1px solid #ccc;
     padding: 10px;
     height: 400px;
      400px;
   }
     
  .demo-box {
      100px;
     height: 50px;
     text-align: center;
     line-height: 50px;
     text-align: center;
     color: #fff;
     background: #96c;
     border-radius: 5px;
     box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
     margin-bottom: 10px;
  }

<div id="timings-demo">
            <div id="ease" class="demo-box">Ease</div>
            <div id="ease-in" class="demo-box">Ease-in</div>
            <div id="ease-out" class="demo-box">Ease-out</div>
            <div id="ease-in-out" class="demo-box">Ease-in-out</div>
            <div id="linear" class="demo-box">Linear</div>
            <div id="cubic-bezier" class="demo-box">Cubic-bezier</div>
        </div>

/*ease效果：*/        
  #ease {
     transition: all 5s ease 0.3s;
     background: #f36;      
  }
 /*ease-in效果：*/
  #ease-in {
     transition: all 3s ease-in 0.5s;
     background: #369;
  }
  /*ease-out效果：*/
  #ease-out {
    transition: all 5s ease-out 0s;
    background: #636;      
  }
 /*ease-in-out效果：*/
  #ease-in-out {
    transition: all 1s ease-in-out 2s;
    background: #3e6;
  }
  /*linear效果：*/
  #linear {
    transition: all 6s linear 0s;
    background: #999;
  }
  /*cubic-bezier效果：*/
  #cubic-bezier {
    transition: all 4s cubic-bezier 1s;
    background: #6d6;
  }
    #timings-demo:hover .demo-box{
    transform: rotate(360deg) scale(1.2);
    background: #369;
    border: 1px solid rgba(255,230,255,08);
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    margin-left: 280px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 15px;
  }

 hover的transition

.demo{
                100px;
                height:100px;
                text-align:center;
                line-height:100px;
                border:10px solid #ccc;
                border-radius:60px;
                font-size:20px;
                -webkit-backface-visibility:hidden;
            }
            #demo1{
                transition:border-color 0.3s ease;
            }
            #demo1:hover{
                border-color:#a3d7ff;
            }

            #demo2{
                transition:all 1s ease;
            }
            #demo2:hover{
                background:#a3d7ff;
                transform: rotate(360deg);
                transition:background 0.3s ease;
            }
<div id="demo1" class="demo">demo1</div>
        <div id="demo2" class="demo">demo2</div>

translate、transform和transition

• transform的中文翻译是变换、变形，是css3的一个属性，和其他width，height属性一样
• translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少 
• transition  在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性
• ransition属性写在最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式。