移动端第十章过渡

最新推荐文章于 2024-12-27 23:27:54 发布

原创最新推荐文章于 2024-12-27 23:27:54 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动端

移动端专栏收录该内容

12 篇文章

订阅专栏

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

运动方式(贝塞尔曲线)
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-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>