CSS3过渡特性实现淡入淡出效果

属性说明:

transition-property:定义应用过渡效果的CSS属性;
transition-duration:定义过渡效果执行的时间;
transition--delay:定义过渡操作之前的等待时间;
transition-timing-function:指定过渡过程的中间值如何规定;

其中在指定过渡过程的中间值时可以使用术语也可以使用三次贝塞尔曲线函数

术语解释:
linear:匀速过渡
ease-in:加速
ease-out:减速
ease-in-out:先加速后减速
ease:曲线与ease-in-out差不多,但画面加速比ease-in-out快

三次贝塞尔曲线函数说明:
该函数用四个点来描述曲线的变化
(0.0,0.0) (a,b) (c,d) (1.0,1.0)

术语与函数数值的对应
linear:     (0.0,0.0) (0.0,0.0) (1.0,1.0) (1.0,1.0)
ease-in:    (0.0,0.0) (0.42,0.0) (1.0,1.0) (1.0,1.0)
ease-out:   (0.0,0.0) (0.0,0.0) (0.58,1.0) (1.0,1.0)
ease-in-out:(0.0,0.0) (0.42,0.0) (0.58,1.0) (1.0,1.0)

第一种方式:用术语
input[type="email"],.login input[type="password"]{
	transition-timing-function:linear;
	transition-property:background,border;
 	transition-duration:0.3s;
}

第二种方式:用函数
/*因为在三次贝塞尔曲线函数中第一个和第四个点的坐标是确定的,因此此函数中定义的是第二三个点的坐标*/

div{
	transition-property:left;
	transition-timing-function:cubic-bezier(0.1,-0.6,0.2,0);
	tansiton-duration:1s;
}
div:hover{
	left:200px;
}

如果要让所有的浏览器都兼容CSS3的过渡效果则应添加其它前缀,不过这会让代码看起来很多,因此可以写为如下简洁样式

/*对多个属性应用过渡时用逗号隔开*/
.login input[type="email"],.login input[type="password"]{
	-webkt-transition:background 0.3s linear,
		          border 0.3s linear;
	  -moz-transition:background 0.3s linear,
		          border 0.3s linear;
	    -o-transition:background 0.3s linear,
		          border 0.3s linear;
	       transition:background 0.3s linear,
		          border 0.3s linear;
}

转载于:https://www.cnblogs.com/Dream-Seeker/p/4445296.html