过渡 - transition

我会带着你远行 2022-01-12 04:37 288阅读 0赞

## 过渡 - `transition` 是变形`transfrom`其中一种效果，定义为一种状态过渡到另一种状态的过程，今天学习到css3动画，特此记录下过渡的使用和一些效果。 ##

实例1：

<div class="box"></div>
    	<p>鼠标移动到 .box 元素上，查看过渡效果。</p>
    复制代码

.box{
    		width: 100px;
    		height: 100px;
    		background: red;
    		margin: 0 auto;	
    		
    		transition-duration: 1s;  /*花费时间*/
    		transition-property: all; 
    		transition-delay:0s; /* 延迟 */
    		transition-timing-function: linear; /*匀速*/
    	}
    .box:hover{
    		width:200px;
    		background: #00FFFF;
    	}
    复制代码

效果图：

注：当指针移出元素时，它会逐渐变回原来的样式。

实例2： 在例子中使用所有过渡属性 - 使用简写

.box{
    		.box{
    			width: 100px;
    			height: 100px;
    			background: red;
    			margin: 0 auto;	
    			
    			transition:1s all 0s linear;
    		}
    复制代码

## 效果图还是这样： ##

下面是我的简单总结  
总：  
transition:2s all;  
transition:2s 1s all linear；  
注：1s是延迟 linear过渡的属性

# 分开看： #

1.transition:2s; 给它本身＋这个过渡的属性：所需时间  
2.transition-timing-function:linear; 匀速  
5.transition: -delay timing-function -duration;

# transition-timing-function 属性 #

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>linear</td> 
   <td>匀速</td> 
  </tr> 
  <tr> 
   <td>ease</td> 
   <td>慢快慢</td> 
  </tr> 
  <tr> 
   <td>ease-in</td> 
   <td>慢开始</td> 
  </tr> 
  <tr> 
   <td>ease-out</td> 
   <td>慢结束</td> 
  </tr> 
  <tr> 
   <td>ease-in-out</td> 
   <td>慢开始和结束</td> 
  </tr> 
 </tbody> 
</table>

参考文章：
    复制代码

[runoob][]

转载于:https://juejin.im/post/5d0124a55188252b1043d242

[runoob]: https://link.juejin.im?target=https%3A%2F%2Fwww.runoob.com%2Fcss3%2Fcss3-transitions.html