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:
Ver original <div id="contenedor_ruc_botones"> <a href="archivo.php" class="ruc_botones animacion_cortina2"> <a href="archivo.php" class="ruc_botones animacion_cortina2"> <a href="archivo.php" class="ruc_botones animacion_cortina2">
Código CSS:
Ver original#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%;
}
}