css - CSS转换和过渡

我有一个用CSS创建的矩形，添加了一个过渡，因此当我悬停时，形状会缩小并消失：

.shapeB{
	background-color: #FFCC00;
	width: 100px;
	height: 100px;
	-webkit-transition:all 1s;
}

.shapeB:hover{
	height:0px;
}

<div class="shapeB"></div>

但是它不是我想要的，而是缩小它。试图刺激消耗液体。可能吗？

最佳答案

 .box{
    position:absolute;
    width: 100px;
    height: 100px;
    left:50px;
    top:50px;
 }

.shapeB{
  background-color: #FFCC00;
  width: 100px;
  height: 100px;
  position:absolute;
  bottom:0;
  -webkit-transition:all 1s;
}

.shapeB:hover{
   height:0px;
}

<div class="box">
<div class="shapeB"></div>
</div>