CSS3实现hover离开时平滑过渡

条件描述

想要实现一种效果，在页面是上div盒子是没有边框的，有四个角。当鼠标悬浮在盒子上面的时候，四个角延伸，最终形成一个border把盒子包裹住。 盒子的延伸和搜索都有一个过渡效果。

hover时候的代码

 .box:hover{
   background: rgba(255,255,255,0.1);
   transition: all .3s ease ;
   .box-1{
      width: calc( 100% - 2px );
   }
   .box-2{
      height: calc( 100% - 2px );
   }
   .box-3{
      height: calc( 100% - 2px );
   }
   .box-4{
      width: calc( 100% - 2px );
   }
 }

鼠标移入的时候，有明显的过渡效果。但是鼠标移出的时候，很生硬。

解决办法，就是在div的初状态也设置一个transition效果。

 .box-corner{
    height:40px;
    width: 40px;
    position: absolute;
    transition: all .3s ease ;
 }