过渡transition

之前我们使用:hover来让一个元素产生变化效果,但是效果硬邦邦的,不顺滑
像这样
div {
width: 100px;
height: 100px;
background-color: skyblue;
}
div:hover {
width: 200px;
height: 200px;
}

CSS3新增加了一个属性 transition(过渡),它能够更好的实现元素从一个状态逐渐到一个状态的效果

div {
width: 100px;
height: 100px;
background-color: skyblue;
transition: width 2s, height 2s;
}
div:hover {
width: 200px;
height: 200px;
}

那么如何使用它呢.
1.你希望那个属性实现过渡效果
2.规定完成过渡花费所需要花费的时间
transition : 属性 花费时间 运动曲线 何时开始
前2个值是必不可少的,运动曲线在过渡上没有变形(transform)明显
all 代表所有属性
看一个小米的效果
css如下
div {
width: 234px;
height: 300px;
float: left;
text-align: center;
transition: all .2s;
}
div:hover {
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
margin-top: -2px;
}
.img {
width: 160px;
height: 160px;
display: block;
margin: 10px auto;
}
.img img {
width: 100%;
height: auto;
}
h3 {
font-size: 14px;
font-weight: normal;
height: 40px;
line-height: 40px;
}
p {
font-size: 12px;
color: #ccc;
height: 40px;
}
em {
font-style: normal;
color: #f40;
}
html

小米9 6GB+128GB

骁龙855，索尼4800万超广角微距三摄

2999元