css3 transition

時間 2019-11-11

標籤 css3 css transition 欄目 CSS 简体版

原文原文鏈接

<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style>

	.trans1{
	-webkit-transition:0.5s ease;
	-moz-transition:0.5s ease;
	-webkit-transition-property:all;
	-moz-transition-property:all;
	position:absolute;
	left:10px;
	top:50px;
	height:100px;
	width:100px;
	background:#ef4900;
	color:white;
	}
	.trans2{
	-webkit-transition:0.5s ease-in-out;
	-moz-transition:0.5s ease-in-out;
	-webkit-transition-property:width;
	-moz-transition-property:width;
	position:absolute;
	left:350px;
	top:50px;
	height:100px;
	width:100px;
	background:blue;
	color:yellow;
	}
	.trans3{
	-webkit-transition:0.5s ease;
	-moz-transition:0.5s ease;
	-webkit-transition-property:height;
	-moz-transition-property:height;
	width:100px;
	height:100px;
	background:green;
	color:#ccc;
	position:absolute;
	left:780px;
	top:50px;

	}
	.trans1:hover{
	width:300px;
	height:300px;
	}
	.trans2:hover{
	width:300px;
	}
	.trans3:hover{
	height:300px;
	}
	</style>
	</head>
	<body>
	<div class="trans1">變換全部s屬性</div>
	<div class="trans2">變換寬度屬性</div>
	<div class="trans3">變換高度屬性</div>
	<!-- transform呈現是一種變形結果，而transition呈現是一種過渡，通俗一點就是一種動畫轉化過程，如漸顯，減弱、動畫快慢等，transform，和transition是兩種不一樣動畫模型；
	一、transition的過渡屬性：
	transition屬性是一個間歇屬性，用於設置四個過渡屬性；
	語法
	transition：property duration timing-function delay；
	值描述transition-property規定設置過渡效果的css屬性名稱。
	transition-duration規定完成過渡效果須要的時間秒，或毫秒；
	transition-timing-function規定速度效果的速度曲線。
	transition-delay定義過渡效果什麼時候開始
	transition-property；
	值：
	all：顯示指對全部元素；
	none:表示沒有元素；
	ident:制定css屬性列表；
	注：請始終設置transition-duration屬性，不然時長爲0；就不會產生過渡效果，transform與transition此時效果同樣
	transition：過渡屬性名稱過渡時間過分模式；
	transition-timing-function的五種值；
	1：ease逐漸變慢；
	2：liner：勻速；
	3：ease-in:緩慢開始（加速）；
	4：ease-out：緩慢結束（減速）；
	5：ease-in-out：緩慢開始，緩慢結束（先加速，或減速）；
	6：cubic-bezier 貝賽爾曲線（mathewlein.com/easer）;-->
	</body>
	</html>

相關文章

相關標籤/搜索

transition&transform

transition+transform

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<