web前端学习

概述

在CSS样式中，过渡是指同一个元素从一种状态到另一种状态变化的动画效果。CSS提供了许多设置过渡效果的属性

属性	释义
transition-property	规定应用过渡效果的CSS属性的名称，当指定的CSS属性改变时，过渡效果开始
transition-durationt	规定完成过渡效果需要花费的时间
transition-timing-function	过渡效果的速度曲线
transition-delay	规定开始过渡前的等待时间。
transition	简易写法，集合前四种，其中transition-property和transition-duration属性为必须有的属性，否则不产生过渡效果

1.transition-property

属性名称：transition-property。属性作用：规定应用过渡效果的CSS属性的名称，当指定的CSS属性改变时，过渡效果开始。过渡效果通常应用在用户将鼠标指针浮动在元素上方的时刻。属性的值：如下表：

可选值	释义
none	没有属性会获得过渡效果
all	所有属性都将获得过渡效果
property	应用过渡效果的CSS属性名称列表，列表内容以逗号分隔

	
#trans_test0{
	transition-property: all;
	transition-duration: 2s;
}	
#trans_test1{
	transition-property: background-color;
	transition-duration: 2s;
}

2.transition-duration

属性名称：transition-durationt。属性作用：规定完成过渡效果需要花费的时间。属性的值：花费时间。以秒s或毫秒ms为单位

	
#trans_test2{
	transition-property: all;
	transition-duration: 10s;
}

3.transition-timing-function

规定过渡效果的速度变化。

可选值	释义
linear	默认值，过渡效果从开始到结束都是相同速度
ease	过渡效果以慢速开始，中间加速，以慢速结束
ease-in	过渡效果以慢速开始
ease-out	过渡效果以慢速结束
ease-in-out	过渡效果以慢速开始和结束
cubic-bezier（n,n,n,n）	cubic-bezier函数中自定义过渡效果速度曲线

	
#trans_test3{
	transition-property: all;
	transition-duration: 2s;
	transition-timing-function:ease;
}

4.transition-delay

属性名称：transition-delay。属性作用：规定开始过渡前的等待时间。属性的值：时间。一般以秒s或毫秒ms为单位。

	
#trans_test4{
	transition-property: all;
	transition-duration: 2s;
	transition-delay: 2s;
}

5.transition

以上四个属性的简写，例如：transition:width 5s ease 1s;其中transition-property和transition-duration属性为必须有的属性，否则不产生过渡效果。

	
#trans_test5{
	/* 过渡的属性 过渡时间 过渡速度曲线 过渡演示 */
	transition: all 2s ease 0s;
}