关键字
① transition-property 属性 表示可过渡的样式属性
transition-property: all | [css1 [...]];
② transition-duration 属性 表示过渡持续时间
transition-duration: <time>;
③ transition-delay 属性 表示过渡延迟时间
transition-delay: <time>;
④ transition-timing-function 属性 表示过渡运动曲线
transition-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：匀速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：贝赛尔曲线函数
⑤ transition 属性 表示前四个属性整体赋值
transition: <transition-property> <transition-duration> <transition-delay> <transition-timing-function>;
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过度</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
/*过度*/
/*持续时间*/
/*来去均具有过度效果*/
transition-duration: .5s;
/*延迟时间*/
/*transition-delay: 1s;*/
/*过度属性: all*/
/*transition-property: width, height;*/
/*过度曲线*/
/*transition-timing-function: linear;*/
/*整体设置*/
/*transition: all .3s .1s linear;*/
transition: .3s cubic-bezier(0,.99,0,.99);
}
.hover {
width: 200px;
height: 200px;
margin: 0 auto;
}
/*可以制造第二状态的处理方式*/
.hover:hover .box {
width: 400px;
height: 190px;
background-color: red;
/*去向第二状态才有过度效果*/
/*transition-duration: .1s;*/
}
.box:active {
}
</style>
</head>
<body>
<!-- 过度:从一个状态以动画方式变成另一种状态的这种变化过程就叫做过度 -->
<!-- 过度效果通过hover产生,可以制作一个hover层 -->
<!-- hover层处理方式:与显示层同等区域大小 -->
<!-- 同样可以将显示层的位置交于hover层处理 -->
<div class="hover">
<div class="box"></div>
</div>
</body>
</html>