aumentare valore parametro css gradualmente con js

[alex-13]

Ciao a tutti, volevo sapere se con js posso aumentare gradualmente un parametro css quando il mouse si trova su un immagine.
Quindi quando il mouse va sopra ad un immagine il suo valore top passa da 0px a -1000px con andamento di -10px al secondo e se il mouse va fuori dall'immagine il valore top torna a 0 sempre con andamento graduale.

Ho provato con vari metodi html+css ma non riesco.

Grazie

[alex-13]

Per ora con questo codice l'immagine passa correttamente da 0 a -1000px al passaggio del mouse solo che lo fa di scatto. vorrei rendere questo passaggio più fluido. come posso dire di fare il passaggio con -10px al secondo?

   <div class="content-wrapper">


				 <div id="immagini">
      <img id="imgEs" src="img2.jpg" alt="" />
     <img id="imgIn"  src="img1.png" alt="" />
 </div>


				
<style type="text/css">
 div#immagini {
     position: relative;
      width:  100%;
      height: 100%;
	 overflow: hidden;
 }
   img#imgEs {
       position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
  }
   img#imgIn {
     position: relative;
     z-index: 20;
  }
	  .imgEs2 {
     top: -1000px !important;
  }
</style>
		<script>			
	var img = document.getElementById("immagini");
img.onmouseover = function(e) { document.getElementById("imgEs").className = "imgEs2"; };
img.onmouseout  = function(e) { document.getElementById("imgEs").className = ""; };
		</script>		
				
		   </div>