transition 有四个属性:
----------- 属性名----------------------------------------------- | 描述 |
---|---|
transition-property | 指定进行transition的属性,默认值为all,还有none(没有属性获得过渡效果),property(应用与过渡效果的css属性名称列表,用逗号分隔) |
transition-duration | 效果需要指定多少秒或毫秒才能完成 |
transition-timing-function | 指定transition效果的转速曲线 |
transition-delay | 定义transition效果开始的时候 |
<div class="box">box</div>
.box{
height: 100px;
width: 200px;
line-height: 100px;
text-align: center;
border-radius: 10px;
background-color: #DCDCDC;
color: #FFFFFF;
transition: all 2s;
/* transition: height 2s,width 2s, line-height 2s,
background-color 2s, transform 2s; */
}
.box:hover{
height: 150px;
width: 300px;
line-height: 150px;
background-color: #000000;
transform: rotate(360deg);
}