过渡动画

过渡的自我了解

transition的语法：transition： transition-property ；transition-duration ；

transition-timing-funciton ；transition-delay；

其参数的取值说明如下：

<transition-property>:定义用于过渡的属性；

<transition-duration>:定义过渡过程需要的时间

 <transition-timing-function>:定义过渡的方式；

 <transition-delay>:定义开始过渡的延迟时间；

使用transition属性定义一组过渡效果，需要以上四个参数。transition属性可以同时定义

两组或两组以上的过渡效果，组与组之间用逗号分隔。

基于webkit内核的私有属性是：-webkit-transition;

基于gecko内核的私有属性是：-moz-transition;

基于prestot内核的私有属性是：-o-transition;

在我看来 transition就相当于一个渡河的船所需要的河 我们在渡河的时候不可能像是瞬间移动一样一下子横跨到对岸，即使你那么做了效果也不会好看就像下面这样

在一瞬间向右移动了100像素
代码如下：

现在我们来个他一个过渡transition

现在这个方块就能平缓的划过 看起来也舒服一点。
复合式写法：
transition:all 2s 1s linear ;
transition: 2s linear 1s all ;

在用到transition的时候他的几个属性是很重要的
再复合写法中当使用复合式写法的时候，过度时间和延迟时间的顺序是不能互换的，第一个值代表过度时间，第二个值代表延迟时间。这个是不能颠倒的

1. transition-property：检索或设置对象中的参与过渡的属性
   说明：属性值可以单独设置否个属性，也可以设置多个属性
   width，height； 还可以设置为all（默认值）代表所有属性

2. transition-duration：检索或设置对象过渡的持续时间
   说明：设置过度时间（s, ms） 1s = 1000ms

3. transition-delay：检索或设置对象延迟过渡的时间说明：设置延迟过度时间（s, ms） 属性值为正值的时候是延迟执行过渡效果，为负值的时候
   是提前只想过渡效果；

4. transition-timing-function：检索或设置对象中过渡的动画类型
   说明：linear 匀速
   ease（默认值）逐渐慢下来
   ease-in加速
   ease-out减速
   ease-in-out先加速后减速