​

目录

transition属性作用

transition属性用法

transition的属性值

transition复合书写

transition属性用法实例

结语

transition属性作用

transition属性用来给元素的属性加过渡动画，当元素的属性变化时会有一个缓慢变化的动画。

transition属性用法 transition的属性值属性 作用transition-property 要过渡的css属性名transition-duration 过渡动画的时间transition-timing-function 过渡动画速度曲线函数transition-delay 过渡动画开始的延迟时间 transition复合书写

transition:<属性名> <动画时间><动画速度曲线><动画延迟时间>；

如：transition:width .3s ease-inout;

动画时间应始终大于等于0.1s，否则过渡动画不会生效。

属性名可以用一个关键词all，代表所有属性值。

动画的延迟时间是可选的。

可以同时设定多个属性，格式如下transition:<属性名> <动画时间><动画速度曲线><动画延 迟时间>,<属性名> <动画时间><动画速度曲线><动画延迟时间>。用逗号隔开每个属性的 设置

transition属性用法实例

效果如下图

989bf966b67c4c1bbaf74841a08607bf.gif结语

基本上所有能改变元素显示效果的css属性都能被transition属性过渡，让一些动画效果能更好的交互显示出来。

​