CSS3 transition 四大属性

淩亂°似流年 2021-09-15 06:30 386阅读 0赞

![SouthEast][]

## 属性定义及使用说明 ##

transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay。

**注意：** 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

<table style="border:0px; margin:4px 0px; padding:0px; border-collapse:collapse; width:729.091px; color:rgb(51,51,51); font-family:&quot;Helvetica Neue&quot;,Helvetica,&quot;PingFang SC&quot;,&quot;Hiragino Sans GB&quot;,&quot;Microsoft YaHei&quot;,&quot;Noto Sans CJK SC&quot;,&quot;WenQuanYi Micro Hei&quot;,Arial,sans-serif; font-size:12px"> 
 <tbody style="border:0px; margin:0px; padding:0px"> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <th align="left" style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; vertical-align:top; text-align:left"> 默认值：</th> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; vertical-align:top"> all 0 ease 0</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <th align="left" style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; vertical-align:top; text-align:left"> 继承：</th> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; vertical-align:top"> no</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <th align="left" style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; vertical-align:top; text-align:left"> 版本：</th> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; vertical-align:top"> CSS3</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <th align="left" style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; vertical-align:top; text-align:left"> JavaScript 语法：</th> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; vertical-align:top"> <em>object</em>.style.transition="width 2s"<br> </td> 
  </tr> 
 </tbody> 
</table>

简写的语法：transition: property duration timing-function delay;

![SouthEast 1][]

![SouthEast 2][]

![SouthEast 3][]

# transition-timing-function #

![SouthEast 4][]

[SouthEast]: /images/20210813/4537ba9aa4a8487b8d4f4a370fb14b0b.png
[SouthEast 1]: /images/20210813/28dd1766a0854c6482cc094605c718b7.png
[SouthEast 2]: /images/20210813/62c936d21824404a84b8d7f9ad98c9ec.png
[SouthEast 3]: /images/20210813/aa73fcdd8a2c48a19ec5e834e16f498c.png
[SouthEast 4]: /images/20210813/885346b9032246578a9f6edab5d71b50.png