transition top and bottom 上下同时展开的动画效果

transition.css

.page {
  position: relative;
  width: 1000px;
  height: 800px;
  border: 1px solid red;

  .foo {
    background-color: red;
    position: absolute;
    transition: all 2s ease 0s;
    top: 100px;
    bottom: 100px;
  }
  
   .foo:hover {
      top: 0;
      bottom: 0;
    }
}