css过渡transition

一：定义

transition是一个复合属性，包括transition-property,transition-duration,transition-timing-function,transition-delay四个子属性。

  transition-property:过渡属性（默认值为all,就是所有属性一起过渡）

transition-duration:过渡持续时间（默认为0s,一定要带时间参数s，或者ms）

transition-timing-function:过渡函数（默认值为ease函数，缓慢的意思，就是开始和结束时慢，中间快）

transition-delay:过渡延迟时间(默认值为0s,一定要带时间参数s，或者ms)

【注意】一般写的时候为了适应浏览器兼容性，一般都是-webkit-transition,-moz-transition等

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;
/*     以下三值为默认值，稍后会详细介绍 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}    
.test:hover{
    width: 500px;
}

<div class="test"></div>

//鼠标移动到元素上，会出现宽度变化效果

二：复合属性

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

transition:<transition-property> || <transition-duration>||<transition-timing-function>||<transition-delay>

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
/*代表持续时间为2s，延迟时间为默认值0s*/
    transition:2s;
}    
.test:hover{
    width: 500px;
}

<div class="test"></div>

//表示持续时间是transition-duration：2s。默认属性transition-property:all，默认过渡函数transition-timing-function:ease。默认延迟时间transition-delay：0s。

三：过渡属性

transition-property

值：none | all |<transition-property>[,<transition-property>]*

初始值：all

应用于：所有元素

继承性：无

none:没有指定任何属性
all:默认值，表示指定元素所有支持transition-property属性的样式
<transition-property>:可过渡的样式，可用逗号分开写多个样式

四：过渡持续时间

该属性的单位是秒s或者ms

transition-duration

值：time

初始值：0s

应用于：所有元素

继承性：无

【注意】该属性不能为负值

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

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

如下：

	transition-property:width,background
	transition-duration:1s//表示width和background过渡时间都是1s

	transition-duration:1s,4s//表示width过渡时间是1s，background过渡时间是4s

 五：过渡延迟时间

duration-delay

值：time

初始值：0s

应用于：所有元素

继承性：无

【注意】该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值（设定值 = 延迟时间+持续时间）。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果

【注意】若该属性为0s则为默认值，若为0则为无效值，所以必须带参数

【注意】该值为单值时，即所有过渡属性都对应同样时间延迟，该值为多值时，过渡属性按照顺序对应延迟时间

.test{
			    height: 100px;
			    width: 100px;
			    background-color: pink;
			    color: #FF0000;			
			    transition:all 3s ease -1s;
			  
			} 
			.test:hover{
				color: #fff;
			    width: 500px;
			    background-color: green;
			}

<div class="test">哈哈哈哈</div>

延迟时间是-1s，但是过渡时间是3s，设定值=3+（-1）=2s，所以过渡时间是2s，延迟时间是0s

六：过渡时间函数

transition-timing-function

值：<time-function>

初始值:ease

应用于：所有元素

继承性：无

取值：

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

七：触发过渡方式

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

触发原理：就是改变了之前css设置的属性的值

伪类触发：

hover，当鼠标悬停触发时，可以改变width，background等属性值

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

focus：获得焦点时触发

@media触发

符合媒体查询条件时触发

@media (max-width:1000px){
		.test{
			width:500px
		}
	}

点击事件触发

test.οnclick=function(){
	test.style.width = '300px';
	setTimeout(function(){
		test.style.width = '100px'
		})
	}

退货要让一人