過渡元素transition的那些事兒


之前看了一些教程,雖然會用,但是總感覺哪里沒有太弄清楚,這次終於弄清楚了,來分享一下,其實簡單的不行。不知道有些人為什么寫的那么復雜


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{
		width: 200px;
		height:200px;
		border:1px solid red;
		float: left;
		margin:20px;
		text-align: center;
		line-height: 200px;
	}
	/*transion前面是需要改變的樣式,后面是持續的時間*/
	.div1{
		color: blue;
		background:orange;
		transition: background 1s,color 1s;
	/*如果想有很多的樣式需要過渡,一個一個寫也太累的,那么就采用transition:all 0.5s*/
	}
	/*改變后的效果*/
	.div1:hover{
		color: red;
		background:green;
	}
	</style>
</head>
<body>
	<div class="div1">hello world</div>
</body>
</html>

transion后面其實只需要兩個值就可以,一個是想要變化的樣式,一個是持續的時間。如果你需要改變的樣式太多,那么就可以通過all來實現。這樣的變換其實可以滿足50%的需求。

下面在進行一點簡單的補充,就是變換時候變換速度的控制:


ease-in-out:剛開始速度慢,然后加速,最后慢下來


linear:速度一直恆定


ease-in:過渡開始慢,然后以恆定的速度運行


ease-out:速度剛開始恆定,后面慢下來


cubic-bezier:貝塞爾曲線(感興趣的可以研究)


使用方法如下:

transition:all 0.5s ease-in;

上面的大概可以滿足80%的需求了,最后還有一點就是為這個動畫添加延時,也就是在等待多久以后才執行,代碼如下:


transition:all 0.5s ease-in 0.2s






注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com