属性:
transition-property: background-color,width;
执行时间:
transition-duration: 5s;
过渡执行的延迟时间:
transition-delay: 3s;
加速
transition-timing-function: ease-in;
减速
transition-timing-function: ease-out;
先加速在减速
transition-timing-function: ease-in-out;
匀速
transition-timing-function: linear;
步长/帧率(分几步走完)
transition-timing-function: steps(3);
贝塞尔曲线
transition-timing-function: cubic-bezier(0.95,-0.07, 0, 1.44);
连写
只有一个时间 - 运动执行时间
有两个时间的时候,第一个代表运动执行时间,第二个代表延迟时间
其余的取值不分先后顺序
transition: width 1s linear,background-color 1s linear ;
all表示当前标签下的所有css属性
当过渡添加给当前标签的时候,鼠标移入和移出都有过渡
transition: all 1s linear;
配合hover使用
div:hover{
width: 600px;
background-color: aqua;
transition: all 1s linear;
}
当过渡添加给当前标签的hover的时候,鼠标移入有过渡