CSS3过渡transiton

Transition过渡：

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

如何创建过渡transition

CSS3过渡与元素上的常规样式一起声明。只要目标属性改变，浏览器就会应用过渡，可以通过一些伪类来触发，如:hover，:focus，:active，:target 和 :checked等。
以下是使用CSS创建简单过渡的步骤：

1. 在默认样式中声明元素的初始状态样式。
2. 声明过渡元素最终状态样式，比如悬浮状态。
3. 在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的Transition过渡属性

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属性的简写中，transition-duration 和 transition-delay 取值都是<time>，所以在简写中区分它们。浏览器会根据先后顺序决定：第一个<time>会解析为transition-duration，而第二个<time>会解析为transition-delay。

故。可以给transition一个速记法。

transiton:<property> <duration>  <animation type> <delay>

也就是：

transition：<过渡属性> <过渡所需时间> <过渡动画函数> <过渡延迟时间>

CSS3的transition子属性详解
在transition属性中包括斯恶子属性： transition-property transition-duration transition-timing-function transition-delay ，在使用时不是每个属性都使用，其他前三个子属性是最受欢迎的。

• 指定过渡属性transition-property :指定过渡动画的CSS属性名称，语法为：

transition-property： none | all | <single-transition-property> [','. <single-transition-property>]

取值简单说明：

• none :没有指定任何样式

• all ：默认值，表示指定元素所有支持transition-property属性的样式

• single-transition-property：指定样式，其等于all或者<IDENT>

• 指定过渡所需时间transition-duration

transition-duration：属性主要用来设置一个属性过渡到另外一个属性所需的时间，即从旧属性过渡到新属性花费的时间，基本语法如下：

transition-duration： <time> [, <time>]*

<time>为数值，单位是s(秒)或ms(毫秒)。 可以作用于所有元素，包括:before和：after,其默认值为0，也就是变换时即时的，当transition-duration取值为0时，指定元素样式过渡时，看不到过渡过程，直接看到结果。

和transition-property属性一样，当设置多个过渡属性时，也可以设置多个transition-property，每个值之家同样使用逗号分隔，而且每个值按顺序对应transition-property值。

• 指定过渡函数transition-timing-function

``transition-timing-function`：属性指定某种指代过渡“缓动函数”的属性，此属性可以指定浏览器的过渡函数，以及过渡期间的操作进展情况，可以将某个值指定为预定义函数，阶梯函数或者三次贝塞尔曲线
基本语法如下：

transition-timing-function： <single-transition-timing-function> [',' , <single-transition-timing-function>]*

single-transition-timing-function,主要包括以下几种：

• ease : 默认值，元素样式从初始状态过渡到终止状态速度由快到慢，逐渐变慢

• linear : 元素样式从初始状态过渡到终止状态速度匀速

• ease-in :元素样式从初始状态过渡到终止状态速度越来越快，呈一种加速状态，这种效果称为渐显效果

• ease-out :元素样式从初始状态过渡到终止状态速度越来越慢，呈一种减速状态，这种效果称为渐隐效果

• ease-in-out :元素样式从初始状态过渡到终止状态时，先加速再减速，这种效果称为渐显渐隐效果

• 指定过渡延迟时间transition-delay

transition-delay：属性用来定义过渡延迟时间，基本语法如下：

transition-delay： <time> [, <time>]*

transition-delay用来指定一个动画开始执行的时间，也就是说改变元素样式属性值后多长时间开始执行过渡效果，其取值为<time>，它可以是正值，也可以是负值和0，非零的时候，必须将单位设置为s(秒)或ms(毫秒)。

• 正整数：元素的过渡动作不会立即触发，当过了设定的时间值之后才触发
• 负整数：元素的过渡动作会从该时间点开始显示，之前的动作被截断
• 元素的过渡动作会立即触发，没有任何延迟。在默认情况下，transition-delay取值为0

使用案例

• 单个CSS3的transition过渡
  代码如下：

input {
background-color: green;
width:100px;
  transition:background-color  2s  ease  .5s
}
input:focus{
background-color:orange;
width:200px;
}

• 多个CSS3的transition过渡
  代码如下：

.box{
background-color:green;
width:100px;
height:100px;
  transition{
    background-color  2s  ease  .5s,
    width 2s ease-in  .5s,
    height  2s  liner  .5s
  }
  .transiton :hover{
     background-color:orange;
     width: 200px;
     height:50px;
  }
}