Hola, estoy tratando de hacer una animacion tipo material design, y me encuentro con un problema.
tengo esto:
HTML
<div id="MAESTRO" class="maestro">
<div id="MASCARA" class="mascara">
<div id="CONTENEDOR" class="contenedor">
Bla bla bla bla bla bla...
</div>
</div>
</div>
CSS:
.maestro
{
postion:relative;
width:100%;
height:100%;
}
.mascara
{
position: absolute;
top: 30px;
right: 30px;
width: 20px;
height: 20px;
border-radius: 10px;
}
.contenedor
{
position:absolute;
width: 150px;
height: 100px;
background-color:#fff;
}
Lo que quiero es poder mediante JQuery es animar el div MASCARA, cambiando el tamaño y radio de border y hacer animacion de forma que el CONTENEDOR, aparece de la nada con una animacion "circular"...
El problema es que en el momento que cambio la posicion tamaño etc de MASCAR, cambia la posicion de CONTENEDOR.
Quiero que CONTENEDOR, este FIJO, que no se mueva, este anclado a MAESTRO, independientemente del tamaño y poscion de mascara...
Alguna idea???
He probado a que CONTENEDOR tenga position:fixed, pero enconces, MASCARA no le afecta y no consigo el efecto de MASCARA CIRCULAR...
GRACIAS!!!
