动画过渡效果详讲

transition:transition-property transition-duration transition-timing-function transition-delay;
过渡可指定代码中的某个动作的速度，不是直接设置某一动作

transition-property 过渡、动态模拟属性

1. 可写属性，例如width,height,background-color等，指定该属性对应的动作变化；
2. 可写all，所有元素都匹配上。

transition-duration 完成时间

数值，单位为秒s，指从旧属性转换到新属性所花费的时间，从开始到完成的总时间。

        .box{
            width: 100px;
            height: 100px;
            background-color: olive;
            transition: background-color 3s;
        }
        .box:hover{
            background-color: pink;
        }
    </style>

transition-timing-function:指定过渡函数

1. linear 匀速
2. ease 慢→快→慢
3. ease-in 以慢开始
4. ease-out 以慢结束
5. ease-in-out 慢→慢 ease与ease-in-out在时间较短的时候，目测效果是一样的，有细微差别：ease强调了中间需要加快，ease-in-out只需要开始和结束慢，对中间速度未说明，即是匀速。（引用网上解说ease：开始很慢，但是很快就加速到⼀个⽐较⼤的速度，时间过半就开始缓慢减速，直到最后减速为0；ease-in-out：开始慢，但是匀加速到⼀个速度⼤概时间到1/3的时候就保持这个速度直到最后1/3时间再均匀减速。）

transition-delay 延迟时间

数值，单位为秒s

1. 正数 过了该数值后，再开始动作；
2. 负数 直接跳到对应时间，通俗解释成属性直接穿越到transition-delay的指定秒数后的样子，然后继续下面的动作。

        .box{
            width: 100px;
            height: 100px;
            background-color: olive;
            transition: all 3s linear -2s;
        }
        .box:hover{
            background-color: pink;
            margin: 20px;
        }
    </style>

• opacity:x; x为数值，无单位，范围0~1，越小越透明。