目录
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属性用法实例
<!DOCTYPE html>
效果如下图
989bf966b67c4c1bbaf74841a08607bf.gif
结语
基本上所有能改变元素显示效果的css属性都能被transition属性过渡，让一些动画效果能更好的交互显示出来。
