移动端第九章过渡

小涛涛啊！

于 2020-09-27 19:56:40 发布

阅读量89

点赞数

分类专栏：移动端内容文章标签：移动端

本文链接：https://blog.csdn.net/t5555666/article/details/108835212

版权

移动端内容专栏收录该内容

15 篇文章 0 订阅

订阅专栏

第九章过渡

transition:过渡

过渡时间
transition-duration: 3s;
过渡属性(定义宽还是高)
transition-property: all;
过渡函数(运动的方式)
transition-timing-function: ease;
过渡延迟时间
transition-delay: 4s;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: red;
				/*过渡时间*/
				transition-duration: 1s;
				/*运动方式*/
				transition-timing-function: ease-in-out;
				/*延迟时间*/
				transition-delay: 2s;
				/*过渡属性*/
				transition-property: width;
			}
			div:hover{
				width: 1900px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

运动方式(贝塞尔曲线)

 ease:开始和结束慢 中间快 相当于cubic-bezier(0.25, 0.1, 0.25,1)
 ease-in:(加速) 开始慢 相当于cubic-bezier(0.42, 0, 1, 1)
 ease-in-out：先加速后减速 cubic-bezier(0.42, 0, 0.58, 1)
 ease-out:(减速) 结束慢cubic-bezier(0.42, 0, 1, 1)
 linear:匀速 相当于cubic-bezier(0, 0, 0.58, 1)

-webkit-transition: 2s width;
 safari浏览器需要加前缀，-webkit- ,其他浏览器不需要添加

transition: 2s width, 4s height, 1s background-color;

transition: 2s width, 2s 2s height, 1s 4s background-color;
transition: 3s 2s width, 4s 2s height, 8s 4s background-color;
过渡：		时间 延迟时间 样式 方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: red;
				/*transition: 完成的过渡的时间    延迟的时间   运动的方式  属性;*/
				-webkit-transition:1s 1s ease-in width,2s 2s ease-in-out height, 3s 3s background-color,4s 4s border;
				-moz-transition:1s 1s ease-in width,2s 2s ease-in-out height, 3s 3s background-color,4s 4s border;
				-ms-transition:1s 1s ease-in width,2s 2s ease-in-out height, 3s 3s background-color,4s 4s border;
				transition:1s 1s ease-in width,2s 2s ease-in-out height, 3s 3s background-color,4s 4s border;
			}
			div:hover{
				width: 1900px;
				height: 800px;
				background: blue;
				border: 4px solid yellow;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>