CSS之transition

蔚落 2022-07-13 02:20 141阅读 0赞

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/53766854][http_blog.csdn.net_zhou_xiao_cheng_article_details_53766854]，未经博主允许不得转载。  
`transition`其实是属性`transition-property`、`transition-duration`、`transition-timing-function`以及`transition-delay`的简写，表示元素在两种状态之间的过渡。  
通常，我们可以在样式表中这样设置`transition`属性的值：`transition: all ease-out .3s;`，这里省略掉了其中一个值，那么该值就取其默认值。但需要注意的是，省略掉的值并不一定是最后一个属性（即`transition-delay`）的值，因为在CSS中，很多属性赋值时，其实并不需要按顺序对相应的属性一一赋值，当然，很多其它的属性赋值时是一定要按顺序来的，比如：`margin`属性、`padding`属性等。接下来，会逐一对这几个属性进行相应的介绍：

*  `transition-property`规定了获得过渡效果的CSS属性的名称：all（所有的CSS属性均获得过渡效果），none（没有任何CSS属性获得过渡效果），property（自定义的获得过渡效果的CSS属性名，多个属性名间可用逗号隔开）。  
    `transition-property: all(默认值) | none | property`
 *  `transition-duration`规定了完成过渡效果所需要的时间，单位可为毫秒或秒：0（没有过渡效果），任意正数（即所需要的过渡时间）。  
    `transition-duration： 0(默认值) | 任意正数`
 *  `transition-timing-function`规定了过渡效果的速度曲线，也就是说，过渡的速度可随着时间的变化而变化：ease（慢速开始，然后加快，再慢速结束的过渡），linear（恒定速度的过渡），ease-in（慢速开始的过渡），ease-out（慢速结束的速度），ease-in-out（慢速开始且慢速结束的过渡）。  
    `transition-timing-function: ease(默认值) | linear | ease-in | ease-out | ease-in-out`
 *  `transition-delay`规定了过渡效果开始前的等待时间，即多久后开始过渡，单位可为毫秒或秒：0（无需等待），任意正数（等待的时间）。  
    `transition-delay: 0(默认值) | 任意正数`

[http_blog.csdn.net_zhou_xiao_cheng_article_details_53766854]: http://blog.csdn.net/zhou_xiao_cheng/article/details/53766854