css3 transtion定义元素平滑运动

时间：6年前阅读：4571

CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。简洁点说就是当元素从一种样式变换为另一种样式时为元素添加效果。

transition主要有四个属性，那这四个属性怎么记呢？变换的话总得有变换的属性名吧，知道是要哪个属性变，还得有变换的持续时间吧，持续时间里还得有变换速率吧，是先快后慢呢还是先慢后快呢；最后呢，一般动画都会有个延迟选项吧；所以就是"属性"，"时间"，"速率"，"延迟"

all所有元素发生变化用这个控制，比如

transition: all 1s;

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    
	#box{    
			width: 100px;    
			height: 100px;    
			background: purple;    
			/*transition: width 1s;*/    
			/*all所有元素发生变化用这个控制*/    
			transition: all 1s;			
    
	}    
	#box:hover{    
		width: 500px;    
	}    
	</style>    
</head>    
<body>    
	<div id="box"></div>    
</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css3 transtion定义元素平滑运动

网友评论