Buenos días, estoy intentando hacer un menú con circulos y con animacion css3, mi problema es el siguiente, cuando pulso sobre el circulo principal me aparecen los cuatro subcirculos con su animacion, el problema es cuando vuelvo a pulsar me desaparecen derrepente, y nose como tengo que hacer para que desaparezca con animacion, os dejo el código.
Código HTML:
Ver original<!doctype html>
<script language="javascript"> function mostrar_ocultar(){
var mostrar=document.getElementById("muestra");
if(mostrar.style.display=="none"){
mostrar.style.display="block";
}else{
mostrar.style.display="none";
}
}
<link href="prueba_css.css" rel="stylesheet" type="text/css">
<span class="capa5"><h1 style="font-size:32px;line-height:150px"> <a href="#" onClick="mostrar_ocultar()">CV Isabel
</a>
<li class="size_letra capa4">Datos personales
</li> <li class="capa3">Formación
</li> <li class="capa2" style="font-size:120%;line-height:125px;">Experiencia
</li> <li class="capa1">Contacto
</li>
el css
Código HTML:
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,1);
font-size: 150%;
text-align: center;
line-height: 500%;
font-family: grutchShaded;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
background-color: rgba(0,0,0,1);
box-shadow: inset 0px 0px 10px 3px rgba(153,153,153,1);
color: #CCC;
}
li.capa1 {
-webkit-animation-duration: 1.5s;
-webkit-animation-name: circulos1;
}
li.capa2 {
-webkit-animation-duration: 1.5s;
-webkit-animation-name: circulos2;
}
li.capa3 {
-webkit-animation-duration: 1.5s;
-webkit-animation-name: circulos3;
}
li.capa4 {
-webkit-animation-duration: 1.5s;
-webkit-animation-name: circulos4;
}
#muestra {
display: none;
}
#contenedor {
height: 700px;
width: 90%;
margin-right: auto;
margin-left: auto;
margin-top: 3%;
}
span {
width: 200px;
height: 201px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,1);
font-size: 32px;
text-align: center;
line-height: 200px;
font-family: grutchShaded;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
background-color: rgba(199,199,203,1);
box-shadow: inset 0px 0px 10px 3px rgba(153,153,153,1);
}
span a {
color: rgba(0,0,0,1);
text-decoration: none;
}
li:hover {
color: #000;
background-color: #CCC;
}
.size_letra {
font-size: 150%;
line-height: 200%;
}
.capa5 {
z-index: 5;
}
.capa4 {
z-index: 4;
left: 40%;
top: 35%;
}
.capa3 {
z-index: 3;
left: 65%;
top: 35%;
}
.capa2 {
z-index: 2;
left: 40%;
top: 75%;
}
.capa1 {
z-index: 1;
left: 65%;
top: 75%;
}
@-webkit-keyframes cabecera {
0% {
width: 200px;
height: 201px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,1);
font-size: 32px;
text-align: center;
line-height: 200px;
font-family: grutchShaded;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
background-color: rgba(199,199,203,1);
box-shadow: inset 0px 0px 10px 3px rgba(153,153,153,1);
z-index:5;
}
100% {
width:100%;
height:50px;
top:100px;
left:10px;
border-radius:0px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
}
@-webkit-keyframes circulos4 {
0% {
left:50%;
top:50%;
}
100% {
left: 40%;
top: 35%;
}
}
@-webkit-keyframes circulos3 {
0% {
left:50%;
top:50%;
}
100% {
left: 65%;
top: 35%;
}
}
@-webkit-keyframes circulos2 {
0% {
left:50%;
top:50%;
}
100% {
left:40%;
top:75%;
}
}
@-webkit-keyframes circulos1 {
0% {
left:50%;
top:50%;
}
100% {
left:65%;
top:75%;
}
}
@-webkit-keyframes descirculos1 {
0% {
left:50%;
top:50%;
}
100% {
left:65%;
top:75%;
}
}