css3 过渡transition的语法

àì夳堔傛蜴生んèń 2023-07-03 04:34 24阅读 0赞

transition：  
众所周知，css效率极高，其变化的过程往往都是在一瞬间完成，速度极快。  
CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义

简写属性transition:  
transition是一个简写属性，用于 transition-property,transition-duration,transition-timing-function, 和transition-delay。  
CSS 过渡 由简写属性 transition 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间

默认值：  
transition-delay: 0s  
transition-duration: 0s  
transition-property: all  
transition-timing-function: ease

**注意  
在transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay**

**推荐抒写顺序  
过渡时间 过渡样式 过渡形式 延迟时间 \[，过渡时间 过渡样式 过渡形式 延迟时间\]**

兼容性  
transition 可以不用厂商前缀，不过鉴于标准刚刚稳定，对于基于 Webkit的浏览器仍然需要厂商前缀。如果想兼容旧版本的浏览器那么也需要厂商前缀（例如Firefox 15 及之前版本, Opera 12 及之前版本)

过渡的属性如下：

transition-property ：指定过渡动画的属性（并不是所有的属性都可以动画）
    transition-duration：指定过渡动画的时间（0也要带单位）
    transition-timing-function：指定过渡动画的形式（贝塞尔）
    transition-delay：指定过渡动画的延迟

一，transition-property 的语法

指定应用过渡属性的名称
    默认值为 all，表示所有可被动画的属性都表现出过渡动画(https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties)
    [描述信息](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties)
     
    可以指定多个 property 
     
    属性值：
      none
          没有过渡动画。
      all
          所有可被动画的属性都表现出过渡动画。
      IDENT
          属性名称 （可以指定多个）

二，transition-duration的语法

属性以秒或毫秒为单位指定过渡动画所需的时间。
    默认值为 0s ，表示不出现过渡动画。
     
    可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
     
    属性值
           以毫秒或秒为单位的数值
           <time> 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。一定要加单位(不能写0 一定要写0s  1s,0s,1s)！

三，transition-timing-function的语法：

CSS属性受到 transition的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变
    默认值：ease
    
    你可以规定多个timing function,通过使用 transition-property属性，可以根据主列表(transition property的列表)给每个CSS属性应用相应的timing function.如果timing function的个数比主列表中数量少，缺少的值被设置为初始值（ease） 。如果timing function比主列表要多，timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。
     
    属性值：
             1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
             2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
             3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
             4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
             5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
             6、cubic-bezier： 贝塞尔曲线
             7、step-start：等同于steps(1,start)
                  step-end：等同于steps(1,end)
                   steps(<integer>,[,[start|end]]?)
                          第一个参数：必须为正整数，指定函数的步数
                          第二个参数：指定每一步的值发生变化的时间点（默认值end）

四，transition-delay的语法

transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
    默认值：0s 
     
    你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变
     
    属性值
           值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

五，当属性值的列表长度不一致时

transition-property: background,width,height;
    transition-duration: 3s,2s;
    transition-delay:3s,2s;
    transition-timing-function:linear;
     
     
    transition-property: background,width,height;
    transition-duration: 3s,2s,3s;
    transition-delay:3s,2s,3s;
    transition-timing-function:linear,ease,ease;
     
     
    超出的情况下是会被全部截掉的
    不够的时候，关于时间的会重复列表，transition-timing-function的时候使用的是默认值ease

六，检测过渡是否完成

当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd
    （每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件）
     
    在transition完成前设置 display: none，事件同样不会被触发

七，案例

①案例1：鼠标触发事件，过渡圆的长度高度和背景  
过渡之前效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
过渡之后对效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]  
代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    		
    			html{
    				height: 100%;
    			}
    			body{
    				width: 60%;
    				height: 60%;
    				border: 1px solid;
    				margin: 100px auto 0;
    			}
    		
    			#circle{
    				width: 200px;
    				height: 200px;
    				border-radius:50% ;
    				background: pink;
    				text-align: center;
    				font: 30px/100px "微软雅黑";
    				
    				/*display: block;*/
    				
    				position: absolute;
    				left: 0;
    				right: 0;
    				bottom: 0;
    				top: 0;
    				margin: auto;
    				
    				transition-property: background,width,height;
    				transition-duration: 1s,0s,1s;
    			}
    			
    			body:hover #circle{
    				width: 100px;
    				height: 100px;
    				background:green;
    				
    				/*display: none;*/
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="circle">
    		</div>
    	</body>
    </html>

②案例2 hover事件 正方形变长方形，过渡时间延迟3s  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]

代码如下

③案例3：使用js绑定元素，添加过渡事件

代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    		
    			html{
    				height: 100%;
    			}
    			body{
    				width: 60%;
    				height: 60%;
    				border: 1px solid;
    				margin: 100px auto 0;
    			}
    		
    			#test{
    				width: 100px;
    				height: 100px;
    				background: pink;
    				text-align: center;
    				font: 30px/100px "微软雅黑";
    				
    				/*display: block;*/
    				
    				position: absolute;
    				left: 0;
    				right: 0;
    				bottom: 0;
    				top: 0;
    				margin: auto;
    				
    				transition-property: width,height;
    				transition-duration: 2s;
    				transition-timing-function: linear;
    			}
    			
    			
    		</style>
    	</head>
    	<body>
    		<div id="test">
    		</div>
    	</body>
    	<script type="text/javascript">
    		window.onload=function(){
    			var testNode = document.querySelector("#test");
    			var bodyNode = document.querySelector("body");
    			//dom0事件
    			bodyNode.onmouseover=function(){
    				testNode.style.width="300px";
    				testNode.style.height="300px";
    				setTimeout(function(){
    					testNode.style.display="none";
    				},3000)
    			}
    			//dom2
    			testNode.addEventListener("transitionend",function(){
    				alert("over")
    			})
    		}
    	</script>
    </html>

④案例4 属性transition-property的用法问题，鼠标进来时高度有过渡，出去时宽度有过渡  
代码中transition-property使用了两次，当hover的时候，transition-property立马变成了height；当出去的时候，transition-property的属性值立马变成了width

⑤案例5， transition在元素首次渲染还没有结束的情况下是不会被触发的  
注意：过渡有延迟效果

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    		
    			html{
    				height: 100%;
    			}
    			body{
    				width: 60%;
    				height: 60%;
    				border: 1px solid;
    				margin: 100px auto 0;
    			}
    		
    			#test{
    				width: 100px;
    				height: 100px;
    				background: pink;
    				text-align: center;
    				position: absolute;
    				left: 0;
    				right: 0;
    				bottom: 0;
    				top: 0;
    				margin: auto;
    				
    				transition-property: width;
    				transition-duration: 2s;
    				transition-timing-function: linear;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="test">
    		</div>
    	</body>
    	<script type="text/javascript">
    		//transition在元素首次渲染还没有结束的情况下是不会被触发的	
    //		window.onload=function(){
    		setTimeout(function(){
    			var test = document.querySelector("#test");
    			test.style.width="300px";
    		},3000)
    			
    //		}
    	</script>
    </html>

⑥window.onload里面添加div，并添加过渡，渲染时间对问题

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    		
    			html{
    				height: 100%;
    			}
    			body{
    				width: 60%;
    				height: 60%;
    				border: 1px solid;
    				margin: 100px auto 0;
    			}
    		
    			#test{
    				width: 100px;
    				height: 100px;
    				background: pink;
    				text-align: center;
    				position: absolute;
    				left: 0;
    				right: 0;
    				bottom: 0;
    				top: 0;
    				margin: auto;
    				
    				transition-property: width;
    				transition-duration: 2s;
    				transition-timing-function: linear;
    			}
    		</style>
    	</head>
    	<body>
    	</body>
    	<script type="text/javascript">
    		//transition在元素首次渲染还没有结束的情况下是不会被触发的	
    		window.onload=function(){
    			var test = document.createElement("div");
    			test.id="test";
    			document.documentElement.appendChild(test);
    			setTimeout(function(){
    				test.style.width="300px";
    			},2000)
    		}
    	</script>
    </html>

⑦ 案例7 过渡的简写属性  
效果和案例1一样  
代码如下

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020020121333783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200201213412854.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200201214112336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70