css3过渡(transition)属性及语法

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：指定要添加效果的CSS属性；指定效果的持续时间。

一、过渡属性

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

过渡(Transition)

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

transition-property属性

概念：检索或设置对象中的参与过渡的属性
语法：transition-property: none | all | property
参数：none(没有属性改变)，all(所有属性改变，默认值)，property(元素属性名)
补充：如果不写transition-property属性，表示所有的属性支持过渡

// 当鼠标离开的时候，transform属性参与过渡
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
}
// 当鼠标经过的时候，transform属性参与过渡
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
}

transition-duration属性

概念：检索或设置对象过渡的持续时间
语法：transition-duration: time;
参数：规定完成过渡效果需要花费的时间(以秒或毫秒计)，默认值是0

// 省略兼容性处理
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    transition-property: transform;
    transition-duration: 2s;  // 鼠标离开的时候，设置过渡时间为2s
}
div:hover { cursor: pointer; transform: rotate(180deg);
    transition-property: transform;
    transition-duration: 2s;  // 鼠标进过的时候，设置过渡时间为2s
}

transition-timing-function属性

概念：检索或设置对象中过渡的动画类型
语法：transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out |
参数：

linear => 线性过渡，均匀运动

ease => 平滑过渡，结束比较生硬

ease-in => 由慢到快，结束比较生硬

ease-out => 由快到慢

ease-in-out => 由慢到快再到慢，这种效果比较人性化

// 省略兼容性处理
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;  // 鼠标离开的时候，设置过渡效果为由慢到快再慢
}
div:hover { cursor: pointer; transform: rotate(180deg);
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;  // 鼠标进过的时候，设置过渡效果为由慢到快再慢
}

transition-delay属性

概念：检索或设置对象延迟过渡的时间
语法：transition-delay: time;
参数：延迟时间，默认值是0

```css
// 省略兼容性处理
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;  // 鼠标离开的时候，设置1s之后再开始过渡
}
div:hover { cursor: pointer; transform: rotate(180deg);
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;  // 鼠标进过的时候，设置1s之后再开始过渡
}

transition属性

概念：复合属性，检索或设置对象变换时的过渡
语法：transition: property duration timing-function delay;

div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition: transform 2s ease-in-out 1s;
       -moz-transition: transform 2s ease-in-out 1s;
        -ms-transition: transform 2s ease-in-out 1s;
         -o-transition: transform 2s ease-in-out 1s;
            transition: transform 2s ease-in-out 1s;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition: transform 2s ease-in-out 1s;
       -moz-transition: transform 2s ease-in-out 1s;
        -ms-transition: transform 2s ease-in-out 1s;
         -o-transition: transform 2s ease-in-out 1s;
            transition: transform 2s ease-in-out 1s;
}