过渡 transition

复合属性，使CSS属性值在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果


取值：

<'transition-property'>：检测或设置对象中参与过渡的属性

<'transition-duration'>：检测或设置对象过渡的持续时间

<'transition-timing-function'>：检测或设置对象中过渡的动画类型

<'transition-delay'>：检测或设置对象延迟过渡的时间


1、过渡属性<'transition-property'>

取值：none | all | property

例如：transition-property: width;

transition-property: border-color, background-color, color;


2、过渡时间<'transition-duration'>

取值：以 s | ms 作为单位


3、过渡时间曲线函数 <'transition-timing-function'>

取值：预定的值或贝塞尔曲线

ease：默认值，慢速开始，快速变快，再慢速结束

linear：匀速

ease-in：慢速开始，加速效果

ease-out：快速开始，减速效果

ease-in-out：慢速开始和结束，中间先加后减


4、过渡延迟<'transition-delay'>

取值：以 s | ms 作为单位


语法：transition: property duration timing-function delay;

例如：

transition: transform 2s, border-radius 2s

transition: all .5s ease-in .1s;


激发过渡效果：现阶段，只能通过 鼠标移入 时进行激发


兼容性：


代码示例一：

<!doctypehtml><html><head><metacharset="UTF-8"><title>Document</title><style>#d1{width:200px;height:200px;background-color:#369;text-align:center;line-height:200px;font-size:18px;/*1、过渡属性*/transition-property:all;/*2、过渡时间*/transition-duration:2s;/*3、速度曲线函数*/transition-timing-function:linear;/*4、延迟*/transition-delay:0s;}#d1:hover{/*通过转换-位移实现位置向右移动200px*/transform:translate(500px)rotate(360deg);border-radius:50%;background-color:#693;}</style></head><body><divid="d1">滚动的元素</div></body></html>


滚动前：

滚动中：




代码示例二：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Document</title><style>h2{font-size:16px;}.test{overflow:hidden;width:100%;margin:0;padding:0;list-style:none;}.testli{float:left;width:100px;height:100px;margin:05px;border:1pxsolid#ddd;background-color:#eee;text-align:center;-webkit-transition:background-color3.5sease-in;-moz-transition:background-color3.5sease-in;transition:background-color3.5sease-in;}.testli:nth-child(1):hover{background-color:#bbb;}.testli:nth-child(2):hover{background-color:#999;}.testli:nth-child(3):hover{background-color:#630;}.testli:nth-child(4):hover{background-color:#090;}.testli:nth-child(5):hover{background-color:#f00;}</style></head><body><h2>请将鼠标移动到下面的矩形上：</h2><ulclass="test"><li>背景色过渡</li><li>背景色过渡</li><li>背景色过渡</li><li>背景色过渡</li><li>背景色过渡</li></ul></body></html>