悬停动画-悬停时滑出屏幕并在鼠标滑出时看到

Question

在将鼠标悬停在占据屏幕一半的容器上时，我想将其滑出屏幕，然后当鼠标移出该区域时，容器将再次显示。

var tempdiv = $("<div>");
tempdiv.addClass("tempdiv").html(temp + "°C");   

var line = $("<hr>");
line.addClass("line");

var descdiv = $("<div>");
descdiv.addClass("descdiv").html(des);

var newdiv = $("<div>");
newdiv.addClass("box"); //black

var newaudiodiv = $("<div>");
newaudiodiv.addClass("audiodiv"); //grey

var container = $("<div>");
container.addClass("parent")
         .append(newaudiodiv,str,newdiv,tempdiv,descdiv,line)
         .hide().delay(10000).show(0);  //container
container.css('background-color',conditions[forecast])
$("body").append(container);

.parent{
  position: relative;
  width: 41vw;
  height: 100vh;
  top: -10px;
  z-index: 4;
   -webkit-transition: width 2s;  For Safari 3.1 to 6.0 
    transition: width 2s;
}

.parent:hover{
     width: 0px;
}
@keyframes slideLeft {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(0);
  }
}