CSS过渡 transition的使用

之前对于CSS学习过，但投入的精力没有特别特别多，对于在自学中不常用的属性很多都是有个映像，但是让我用我得思索一会，现在在公司里的内容大多都是操作js文件的数据和一些判断，看的有些头疼干哕，现在又想起来CSS的好。在这记录一下css中transition的用法，补充一下之前的漏洞。

transition 复合用法

之前都是一直使用复合用法，依然推荐这种写法，但是有必要了解一下拆分的写法。

transition: width 0.3s ease-in-out 0s; 宽度属性过度变化，其他属性立刻变化

transition: all 0.3s ease-in-out 0s; 所有属性都是过度变化

        div{
            width: 200px;
            height: 200px;
            background: pink;
            transition: width 0.3s ease-in-out 0s;
        }
        div:hover{
            width: 400px;
            height: 400px;
            background: blue;
            border: solid 10px rebeccapurple;
        }

拆分写法

transition-property 属性

transition-property: all | not | 宽 高 颜色 ···

all:所有属性都变化

not:所有属性都不变化

复合写法中的参数一

transition-duration 过渡时间

必须带单位 s 或 ms

复合写法中的参数二

transition-timing-function 速率曲线

默认值为：ease

复合写法中的参数三

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

贝塞尔曲线不太懂，有时间要去学习一下。

transition-delay 延迟时间

默认值为：0s

必须带单位 s 或 ms

复合写法中的参数四