Transform VS transition

Mне нужно чтобы ширина/высота дочерних элементов открывалось не с центра а с левой стороны/сверху. Eсть ли способ добиться этого одновременно используя transform translate?

      <div class="container">
            <div class="top_bottom"></div>
            <div class="right_left"></div>
        </div>

       .container{
       position:relative;
       top:50%;
       left:50%;
       transform:translate(-50%,-50%);
       width:250px;
       height:250px;
       border:2px solid red;
   }
   .container:after{
    content:'';
    width:0px;
    height:200px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border-top:2px solid red;
    border-bottom:2px solid red;
    transition:all 1s ease-in-out;
}
.container:before{
    content:'';
    width:200px;
    height:0px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border-left:2px solid green;
    border-right:2px solid green;
    transition:all 1s ease-in-out;
}
.container:hover:after{
    width:200px;
    transition:all 1s ease-in-out;
}
.container:hover:before{
    height:200px;
    transition:all 1s ease-in-out;
}