Llamar a un div con transiciones mediante css

[speedmethal]

Hola de nuevo.

He estado echando un vistazo a los links que me habéis facilitado y hay una transición que no aparece en la lista (-webkit-transition:). No obstante, dejo el código que tengo a ver si me podéis echar un cable. Mil GRACIAS!!!!

Estilo css:

Código:

<style type='text/css'>
.modalmask {
    position: absolute;
    font-family: Arial, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
    pointer-events: none;
}
.modalmask:target {
    opacity:1;
    pointer-events: auto;

}

.modalbox{
    width: 210px;
    position: relative;
    padding: 15px 15px 10px 15px;
    background: #fff;
    border-radius:3px;
    -webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    transition: all 400ms ease-in;    
}

.modalmask:target .movedown{       
    margin-top:10%;
}
.movedown {
    margin: 0 auto;
}
.close {
    background: #fff;
    color: #fff;
    line-height: 25px;
    position: absolute;
    right: 1px;
    text-align: center;
    top: 1px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius:3px;
}
 
.close:hover {
    background: #FAAC58;
    color:#222;
}
    </style>

código Javascript:

Código:

<script type='text/javascript'>

  function stopscrollhref(){
     var ventana = document.getElementById('modal1');
     ventana.style.display = 'block';       	
  }
</script>

Div de la ventana emergente:

Código:

<div class='modalmask' id='modal1'>
    <div align='center' class='modalbox movedown'>
        <a class='close' href='#close' title='Close'>X</a>
<div style='width: 100%; height: auto; vertical-align: middle;padding-top:15px;'> 
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=AIngenieros&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <table width='100%'>
          <tr>
            <td>
              <input name='email' placeholder='Email address...' style='width:140px;height:20px;' type='text'/>
              <input name='uri' type='hidden' value='AIngenieros'/><input name='loc' type='hidden' value='en_US'/>
            </td>
            <td width='64px'>
             <input class='button-generic' style='width:60px;height:26px;' type='submit' value='ENVIAR'/>
            </td>
          </tr>
        </table>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
    </div>      
</div>
</div>

Para ejecutar el javascript tengo una imagen que llama a la función al hacer click:
El caso es que la llama, pero solo se muestra el estilo .modalmask y se queda ahí "parada"

Código:

<a href='javascript://' onclick='javascript:stopscrollhref()'><img alt='' src='http://1.bp.blogspot.com/-E0fmDTqIfEk/VkDog-17ZKI/AAAAAAAAAFY/UHeLmInqaBA/s1600/e-mail.png' style='vertical-align:middle;border:0'/></a>

La idea de esto es porque si llamaba al div con el código de abajo la ventana aparecía como yo quería, pero se producía un scroll de la pantalla bastante incómodo.

Código:

<a href='#modal1'><img alt='' src='http://1.bp.blogspot.com/-E0fmDTqIfEk/VkDog-17ZKI/AAAAAAAAAFY/UHeLmInqaBA/s1600/e-mail.png' style='vertical-align:middle;border:0'/></a>

Alguna sugerencia?

De nuevo mil gracias por vuestro tiempo.

Saludos