过渡 transition
css名称|all 过渡时间(必须参数) 运动曲线 开始时间
s|ms
s|ms
属性 | 作用 |
---|---|
linear | 匀速 默认值 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1) |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1) |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1) |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1) |
transition效果
transition-property 指定CSS属性的name
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候
.box1 {
width: 100px;
height: 100px;
background-color: pink;
transform-style: preserve-3d;
--这里是过渡--
transition: 1s;
}