CSS3 transition 过渡属性

    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。通过过渡transition属性,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果，要实现这一点，必须实现一项内容，即指定效果的持续时间。

一、过渡属性

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称(默认为all)。	3
transition-duration	定义过渡效果花费的时间。默认是 0s。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"函数。	3
transition-delay	规定过渡效果何时开始。默认是 0s。	3

二、复合属性

过渡transition的这四个子属性只有是必需值且不能为0。其中，和都是时间。当两个时间同时出现时，第一个是，第二个是；当只有一个时间时，它是，而为默认值0

transition:  ||  || 
 || 

[注意]transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性。

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 2s;/*代表持续时间为2s，延迟时间为默认值0 */
            /* transition: 1s 2s; 代表持续时间为1s，延迟时间为2s */
        }
        .test:hover {
            width: 300px;
        }

image

三 、相关子属性。

1. transition-property
   transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）。none: 没有指定任何样式，all: 默认值，表示指定元素所有支持transition-property属性的样式。: 可过渡的样式，可用逗号分开写多个样式。
   注意：始终指定 transition-duration属性，否则持续时间为0，transition不会有任何效果。

   1. 1.可过渡的样式

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

   颜色: color background-color border-color outline-color
   位置: backround-position left right top bottom
   长度: 
       [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
   

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            background-color: lightblue;
            transition: width 2s, background-color 2s ease 0.5s;
            /*代表width持续时间为2s，延迟时间为默认值0；
              background-color持续时间2s 延迟0.5s */
        }

        .test:hover {
            width: 300px;
            background-color: indianred;
        }

效果图：

image

2. transition-duration
   transition-duration属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值：0s。

   [注意]该属性不能为负值 。

   [注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位 。

   [注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间 。

3. transition-timing-function
   transition-timing-function属性指定切换效果的速度。它可以取一下几个值。默认值：ease 。

值	描述
linear	规定以相同速度开始至结束的过渡效果，即匀速。（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4. transition-delay
   transition-delay属性指定何时将开始切换效果，值是指以秒为单位（S）或毫秒（ms）。默认值：0s。

   [注意]该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果 [注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位 。

   [注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间 。

四、过渡阶段

1. 过渡开始时间=样式改变的时刻+过渡延迟时间；而过渡结束时间=过渡开始时间+过渡持续时间。
2. 过渡起始值=过渡前的过渡属性值；而过渡结束值=过渡完成后的过渡属性值 。
3. 过渡分为两个阶段：前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬时值
4. 以hover为例，若在元素非hover态时设置transition，相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition，则前进状态以hover态设置的为准，而反向状态以非hover态设置的为准 。

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 3s;/* 设置反向状态 */
        }
        .test:hover {
            width: 300px;
            transition: 100ms;
        }

效果:

image

五、触发方式

​ 一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等 。

【1】hover ： 鼠标悬停触发 。

【2】active ： 用户单击元素并按住鼠标时触发 。

【3】focus ： 获得焦点时触发。

【4】@media触发 ： 符合媒体查询条件时触发 。

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