animacion con css3 y javascripts

panyy80 · #1 (**permalink**) 05/10/2012, 02:24

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>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<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";
 
    
    
    }
}
 
 
</script>
<link href="prueba_css.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="contenedor">
  <header>
  </header>
  <article>
    <ul>
     
      <span class="capa5"><h1 style="font-size:32px;line-height:150px">
      <a href="#" onClick="mostrar_ocultar()">CV Isabel</a>
      </h1></span>
     
      <div id="muestra">
        <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>
      </div>
    </ul>
  </article>
  <footer>
  </footer>
</div>
</body>
</html>

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%;
	}
}