CSS3知识汇总11

多重变换，当一次应用多种变换效果时，将按照从左到右的顺序依次应用每个效果，各种转换函数之间用空格间隔

变换次序不能随意更改

缓动用于在元素从一个状态转换到另一个状态时，增加中间的过渡效果，使视觉效果平滑改变，并起到吸引用户注意力的作用

缓动属性

持续时长transition-duration

缓动的持续时长，秒和毫秒为单位

0.5s表示半秒钟，500ms表示半秒钟

很少单独使用，一般用途是结合其他缓动属性，构成复杂的多重缓动效果

时间函数transition-timing-function

描述了元素从一种状态到另一种状态的变化过程中的变化速度。

ease先快后慢

linear匀速

ease-in先慢后快

ease-out先快后慢

ease-in-out两头慢中间快

延时启动时长transition-delay

如果要让状态的转换延时发生，可以用transition-delay属性指定另一个时间值

可将transition简写，如果只写一个时间值，表示缓动的持续时长，不延时启动

如果写两个时间值，则第1个参数表示持续时长，第2个参数表示延时启动时长

参与缓动的属性transition-property

可以令多个属性同时变化

例子：电池

.battery{

    font-size: 30px;

    width: 6em;

    height: 3em;

    color:midnightblue;

    border:0.5em solid;

    border-radius: 0.2em;

    position: relative;

    background-image: linear-gradient(to right, #666, #666);

    background-repeat: no-repeat;

    background-size: 10% 80%;

    background-position: 0.3em 0.3em;

    transition: 5s steps(6);

}

.battery::after{

    content:'';

    position: absolute;

    width: 0.5em;

    height: 2em;

    background-color: currentColor;

    top:0.5em;

    right:-1em;

    border-radius: 0 0.2em 0.2em 0;

}

.battery:hover{

    background-size: 90% 80%;

}