transition就是一个从0到1变化的一个过程,在规定的时间内展示出来的一个效果
基本语法,一般是和hover配合着使用
<style>
.box1{
width: 200px;
height: 200px;
background: red;
transition: width 2s 2s,background 2s .5s;
}
.box1:hover{
width: 400px;
background: yellow;
}
</style>
hover时 transiton :过渡属性 花费时间 运动曲线 何时开始(延迟时间)
过渡属性
all可以表示所有属性,写了all之后还是很方便的,你要什么属性变化,在下面的hover里面加变化后的属性值就行,没加的不变
如果有多个属性需要变化,可以用逗号隔开
transition: width 2s 2s,background 2s .5s;
运动曲线
esae 默认 逐渐慢下来
linear 匀速
ease-in-out 先加速后减速
ease-in 加速
ease-out 减速