I have a form that initially is display none and negative margin, I wanted that when the button was clicked it gave the impression that the div was dragged such as that of this website, the side menu, link .
I basically made a while while the right is different from 0 and I'm modifying the value of right, but it does not give the impression that it is walking, it goes at once, it follows the code.
I wanted it to look like this, but it looked like it was dragged 
Form
<form name="contactform" id="modal_form" method="post">
<div id="form_title"><h3 id="changeText">Register for valutation</h3></div>
<select id="cbBox" name="example">
<option value="#">I would like a valutation for</option>
<option value="A">A</option>
<option value="B">A</option>
<option value="-">Other</option>
</select>
<label class="itens">Property Location<input class="campo" type="text" name="property"></label>
<label class="itens">First Name<input class="campo" type="text" name="nome1"></label>
<label class="itens">Last Name<input class="campo" type="text" name="nome2"></label>
<label class="itens">E-mail<input class="campo" type="email" name="email"></label>
<label class="itens">Telephone <input class="campo" type="text" name="telefone"></label>
<label class="itens">Property postcode<input class="campo" type="text" name="postcode"></label>
<label class="itens">Message<textarea name="conteudo" id="box"></textarea></label>
<input class="button send" type="submit" value="Enviar" onclick="return validar();">
<input type="button" class="button cancel" value="Cancelar">
</form>
</div>
</div>
</div>
CSS and JS
/* ESSA FUNÇÃO SERVE PARA ABRIR O POPUP DO FORMULARIO DE CONTATO */
function modalOpen(){
$(document).ready(function(e){
tamanho = $('.modal-box').css("width");
novoTamanho = $('.modal-box').css("right");
$('#modal').css("display","block");
subname = parseInt(novoTamanho.substring(0, novoTamanho.length-2));
while(subname <= 0){
$('#modal').css("display","block");
subname += 10;
$('#box1').css("right",subname+"px");
}
/*FECHAR O MODAL SE O BOTÃO CANCELAR FOR PRESSIONADO */
$('.cancel, #modal').click(function(event){
if(event.target !== this){
return;
}
$('#box1').css("right","-450");
});
});
}.btn_modal{ color: white; margin-bottom: 10px; background-color: darkgrey; border: none; font-size: 19px;}
.btn_modal:hover{background-color: honeydew; color: black; }
#modal{ background: rgba(0,0,0, 0.1); width: 100%; height: 100%; position: fixed; display: none; left:0; top: 0; z-index: 10000; }
.modal-box{background-color: #FFF; width: 30%; height: 570px; position: absolute; right:-410px; top: 2%; margin-left: -20%; margin-top: -150px z-index: 10000;;}
#modal_form{display: block; margin: 0 auto; z-index: 10000;}
.itens{ margin-left: 10%; display:block; margin-top: 3%; z-index: 10000; }
.itens input{ line-height: 10px; display: block; width: 90%; z-index: 10000; }
#bairro{ display: block; margin-right: 10%; width: 155px; z-index: 10000;}
#box{display:flex; margin-top: 0; width:90%; height: 90px; resize: none; z-index: 10000;}
#form_title{text-align: center;background-color: grey; color: white; padding: 0; z-index: 10000;width: 100%; height: 50px; }
#form_title h3{float: left; margin-left: 5%; padding-top: 10px; margin-bottom: 0;}
#modal_form{ width: 80%; height: 400px;z-index: 10000;}
.button{ width: 130px; margin-top: 10px; height: 30px; background-color: grey; color: white;z-index: 10000; display: inline-block; float: right;}
.button:hover{background-color: black;}
#modal_form{width: 100%; height: 430px;}
.cancel{margin-right: 2%;}
.send{margin-right: 8%;}
#cbBox{line-height: 10px; display: block; width: 81%; z-index: 10000; margin-left: 10%; margin-top: 10px;}