深入理解CSS过渡属性transition

深入理解CSS过渡属性transition

CSS中过渡属性transition，可以在不需要JS的情况下实现简单的动画交互效果。

定义

过渡transition是一个复合属性，包括transition-property,transition-duration，transition-timing-function，transtion-delay四个子属性。通过四个子属性配合完成过度效果。

transition-property : 过渡属性 （默认为all）
transition-duration: 过渡时间（默认为0s）
transition-timing-function: 过渡函数（默认值是ease函数）
transition-delay: 过渡延迟函数

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

Demo：

.test {
  height:100px;
  width:100px;
  background-color:red;
  transition-duration:3s;  /*过渡时间为3秒*/
  transition-property:all;
  transition-timing-function:ease;
  transition-delay:0s;
}
.test:hover{
  width:300px;
}

复合属性

属性transition这四个子属性中，只有transition-duration是必需值且不能为0；其中transition-duration和tansition-delay都是时间，当存在两个时间时，第一个是transition-duration,如果出现两个时间值，第一个是transition-duration，transition-delay为默认值0s。

transition-property

过渡属性：

• 值：none || all ||

• 初始值：all

• 适用于：所有元素

• 继承性：无

  none:没有指定任何样式
  all :默认值，指定元素所有支持transition-property属性的样式
   : 可选过渡样式
  

可过渡样式

不是所有的CSS样式都可以过渡，只有具有中间值的属性才有过渡效果。

颜色：color background-color border-color outline-color
位置：background-position left right top botton
长度：
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient

过渡持续时间

该属性单位是 秒（s）或者毫秒（ms）

transition-duration

• 值：

• 初始值：0

• 应用于：所有元素

• 继承性：无

• 该属性不能为负值

• 该属性必须带单位，如果为0s则为默认值，如为0则为无效值

• 该值为单值时，所有的过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应顺序时间

  transition-property: width,background;
  

过渡延迟时间

该属性定义元素延迟多少时间后开始过渡效果，该属性单位是秒（s）或毫秒（ms）

transition-delay

• 值：
• 初始值：0s
• 应用于：所有元素
• 继承性：无
• 【注意】若该属性为负值，无延迟效果，但过渡元素的起始值将从0变成设定值（设定值=延迟时间+持续时间），若该设定值小于等于0；则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果。
• 【注意】该属性必须带单位，0s为默认值，0则为无效值。
• 该值为单值时，所有过渡属性都对应同样的时间；该值为多值时，过渡属性按顺序对应持续时间。

过渡时间函数

过渡时间函数用于定义元素过渡属性随时间变化的过渡速度变化效果。

transition-timing-function

• 值：
• 初始值：ease
• 应用于：所有元素
• 继承性：无

取值

过渡时间函数取值共三种取值，分别是关键字、steps函数和bezier 函数。

steps函数

bezier函数

关键字

关键字是bezier函数或steps函数的特殊值。

ease:开始和结束慢，中间快。
linear：匀速
ease-in：开始慢
ease-out: 结束慢
ease-in-out：和ease类似，但比ease幅度大
step-start:直接位于结束处
step-end:位于开始处经过时间间隔后结束。

多值功能

transition多个属性值可以用逗号分隔开，表示同时为多个属性值设置过渡属性。

1. 设置不同的transition-property，对应的transition-delay，transition-timing-function，transition-duration的属性相同时，设置一个即可。

   #test1 {
     transition-property:width,background;
     transition-duration:3s;
     transition-timing-function:ease;
     transition-delay:500ms;
   }
   /*相当于*/
   #test1 {
     transition:width 3s ease 500ms,background 3s ease 500ms;
   }
   

2. 当transition-property的值的个数多余对应的其他属性时（属性值大于1个），则按顺序取值。

   #test{
     transition-property:width,background,opacity;
     transition-duration:2s,500ms;
     transition-timing-function:linera,ease;
     transition-delay:200ms,4s;
   }
   /*相当于*/
   #test1{
     transition:width 2s linera 200ms, background 500ms ease 4s,opacity 2s linera 200ms;
   }
   

3. 当transition-property值得个数少于对应的其他属性，则多余的属性无效。

   #test1{
       transition-property: width;
       transition-duration: 2s,500ms;
       transition-timing-function: linear,ease;
       transition-delay: 200ms,0s;
   }
   /*类似于*/
   #test1{
       transition: width 2s linear 200ms;
   }
   

   ​

4. 当transition-property的值中出现一个无效值，它依然按顺序对transition的其他属性值（其他属性出现无效值，处理情况也类似）。

   #test1{
       transition-property: width,wuxiao,background;
       transition-duration: 2s,500ms;
       transition-timing-function: linear,ease;
       transition-delay: 200ms,0s;
   }
   /*类似于*/
   #test2{
       transition: width 2s linear 200ms,background 2s linear 200ms;
   }
   

5. 当transition-property的值中，有些值重复出现多次，则以最后出现的值为准，前面所有出现的值都被认定为无效值，但依然按顺序对应transition的其他属性值。

   #test1{
       transition-property: width,width,background;
       transition-duration: 2s,500ms;
       transition-timing-function: linear,ease;
       transition-delay: 200ms,0s;
   }
   /*类似于*/
   #test2{
       transition: width 500ms ease 0s,background 2s linear 200ms;
   }
   
   

过渡阶段

1. 过渡开始时间=样式改变时间+过渡延迟时间；

   过渡结束时间=过渡开始时间+过渡持续时间。

2. 过渡起始值=过渡前的过渡属性值

   过渡结束值=过渡完成后的过渡属性值。

3. 过渡分两个阶段：前进（forward）和反向（reverse）。若前进阶段一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束的瞬时值。

4. 以hover为例，若在元素的非hover状态设置transition，相当于设置的反向状态，而前进和反向是一致的。如果在hover设置transition，则前进状态以hover设置的为准，反向以非hover的为准。

5. 如果子元素和父元素的过渡属性一致，若触发子元素过渡时，父元素正在过渡，则将父元素过渡的中间态的值作为子元素过渡的初始值。

6. 若过渡起始值为auto，则浏览器不会自己计算具体数值，不会产生过渡效果。

7. 隐式过渡

触发方式

一般过渡transition的触发有三种方法，分别是伪类触发、媒体查询触发和Javascript脚本触发。

常见的是通过伪类触发，包括hover,focus,active等。

• 伪类触发

• 媒体查询触发

  /* 把浏览器的宽度拖动到小于1000px时触发 */
  @media (max-width: 1000px){
      .test{
          width: 500px;
      }
  }
  

• 点击事件

  用户点击元素时触发。

  test.onclick = function(){
      test.style.width = '300px';
      setTimeout(function(){
          test.style.width = '100px';
      },3000);
  }
  

API