CSS transition过渡属性详解

目录

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属性用法实例

      效果如下图

结语

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