Animación nno funciona correctamente en firefox, en chrome si.

[camillo47]

Hola. estoy trabajando en una animación css3 la cual cuando le doy click a un botón se abre una ventana modal donde tengo 3 div's que contienen a su ves 3 etiquetas <a> animadas.
En Chrome cada vez que abro la ventana modal los div's se animan, pero en Firefox solo lo hace la primera vez que abro la ventana modal, cuando la cierro y la vuelvo a abrir las etiquetas <a> no se animan, como si lo hace en Chrome.
La ventana modal la abro con JQuery modificando la propiedad css display, block(para mostrarla) y none (para ocultarla).

Muchas gracias de antemano por su ayuda.

Código HTML:

<div id="modal_ruc">
        <div id="contenedor_ruc_botones">
                <div>
                                         <a href="archivo.php" class="ruc_botones animacion_cortina2">
                                </div>
                <div>
                                         <a href="archivo.php" class="ruc_botones animacion_cortina2">
                                </div>
                <div>
                                        <a href="archivo.php" class="ruc_botones animacion_cortina2">
                               </div>
        </div>
    </div>
 

Código CSS:

#modal_ruc > #contenedor_ruc_botones div .ruc_botones{
                border: 2px solid #FFF;
                display: inline-block;
                width: 130px;
                height: 130px;
                border-radius: 100%;
                background-color: #fff;
                margin-top: 110%;
                overflow: hidden;
                
            }
            #modal_ruc > #contenedor_ruc_botones div .animacion_cortina2{
                animation-name: cortina;
                animation-duration: 0.2s;
                animation-timing-function: cubic-bezier(.18,.89,.32,1.28);;
 
                -webkit-animation-name: cortina;
                -webkit-animation-duration: 0.2s;
                -webkit-animation-timing-function: cubic-bezier(.18,.89,.32,1.28);;
 
                -moz-animation-name: cortina;
                -moz-animation-duration: 0.2s;
                -moz-animation-timing-function: cubic-bezier(.18,.89,.32,1.28);;
            }
 
            @keyframes cortina{
                0%{
                    margin-top: -50%;
                }
                100%{
                    margin-top: 110%;
                }
            }
            @-webkit-keyframes cortina{
                0%{
                    margin-top: -50%;
                }
                100%{
                    margin-top: 110%;
                }
            }
            @-moz-keyframes cortina{
                0%{
                    margin-top: -50%;
                }
                100%{
                    margin-top: 110%;
                }
            }