多重变换,当一次应用多种变换效果时,将按照从左到右的顺序依次应用每个效果,各种转换函数之间用空格间隔
变换次序不能随意更改
缓动用于在元素从一个状态转换到另一个状态时,增加中间的过渡效果,使视觉效果平滑改变,并起到吸引用户注意力的作用
缓动属性
持续时长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%;
}
网友评论