css3 transition 过渡使用总结

1. 案例1 transition: 2s;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#test{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background: pink;
				text-align: center;
				line-height: 200px;
				font: 50px/200px "微软雅黑";
				
				/* 设置  相对于父控件 水平、垂直  居中 */
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				/* 设置过渡*/
				transition: 2s;
			}
			body:hover #test{
				width: 50px;
				height: 50px;
				font: 10px/100px "微软雅黑";
			}
		</style>
	</head>
	<body>
		 <div id="top">我是top</div>
		    <div id="test">
		 	 AAA
		    </div>
	</body>
</html>

2. 综合写法: 过渡时间延迟时间过渡样式过渡函数
第二个默认是延迟时间
transition: 3s 3s width linear,0s 1s height ease-in-out;

3. 分开写：
默认是:all、width、height、
不是所有的属性都支持过渡的：支持过渡属性查询站点
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
3.1.     transition-property: width,height,font-size; /* 过渡属性 */

               /* 如果有2个transition-property,后面的会把前面的覆盖 */
/* 如果时间不对应，那么内核会拷贝， 3000ms,2000ms拷贝以后 3000ms,2000ms,3000ms,2000ms */
           3.2.    transition-duration: 3000ms,2000ms; /* 动画持续时间 */
              3.3.    transition-timing-function: linear; /* 执行估值器 */

系统估值器：
动画的默认效果：由慢变快再变慢

linear:线性过渡，等同于贝塞尔曲线（0,0,1,1）
ease:平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
ease-in:由慢到快，等同于贝塞尔曲线（0.42,0,1,1）
ease-out:由快到慢，等同于贝塞尔曲线（0,0,0.58,1）
ease-in-out:由慢到快再到慢，等同于贝塞尔曲线（0.42,0,0.58,1）

4. transition-timing-function: cubic-bezier(.07,1.25,.73,-0.77)、动画监听结束、 transition-delay: 3000ms;

自定义效果：
https://cubic-bezier.com x表示时间，y宽度width进度, 斜率表示加速度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			
			#test{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background: pink;
				text-align: center;
				line-height: 200px;
				font: 50px/200px "微软雅黑";
				
				/* 设置  相对于父控件 水平、垂直  居中 */
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;

				transition-property: width;  /* 过渡属性  */
	
				/* 如果有2个transition-property,后面的会把前面的覆盖  */

				transition-duration: 3000ms;       /*     动画持续时间   */
			/*	transition-timing-function: ease; */ /* 执行估值器 */
			    transition-delay: 1000ms;
		        transition-timing-function: cubic-bezier(.07,1.25,.73,-0.77);
			}
			
			body:hover #test{
				width: 500px;
			}
			
			
		</style>
		
		<script type="text/javascript">
		
		window.onload=function(){
			window.addEventListener("transitionend",function(){
				alert("动画结束");
			})
			
		}
		
		</script>
	</head>
	<body>
		
		 <div id="top">我是top</div>
		
		    <div id="test">
		 	 AAA
		    </div>
	
	     
	
	</body>
</html>

css3 transition 过渡使用总结

猜你喜欢