[SOLUCIONADO] Transition no funciona U_U

BREIQ · #1 (**permalink**) 16/03/2016, 21:04

UPDATE:

Ya quedo arreglado. Muchas gracias a todos y buen dia n_n

ORIGINAL:
Saludos. Busco de nuevo su ayuda con Javascript (Siempre es Javascript).

Verán, tengo este sitio. http://prisma.breiq.com/Ejemplo-Blog-Ciencia/

Lo que quiero que haga al hacer clicl en la imagen giratoria, es que el footer y header que se ven, se hagan con 0% de altura y un content, con 0% al 100. Eso si lo hace, pero por alguna razón no funciona la transición.

Igual otro favor. Alguien sabrá porque en Google Chrome y Edge se deforma ese SVG?? En firefox no me pasa.

Gracias por su ayuda y les mando un saludo.

CODIGO:

Código HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo Blog Ciencia</title>
<style type="text/css">

*{
	margin:0;
	padding:0;
	background-color:transparent;
}

body, html{
	height:100%;
	width:100%;
}
#start-button{
	position:fixed;
    top: 50%;
    left: 50%;
	height:40%;
	width:auto%;
	-webkit-transform: translate(-50%,-50%) !important;
    -moz-transform: translate(-50%,-50%) !important;
    -ms-transform: translate(-50%,-50%) !important;
    -o-transform: translate(-50%,-50%) !important;
    transform: translate(-50%,-50%) !important;
    -webkit-transition: display 3s;
    -moz-transition: display 3s;
    transition: display 3s;
}
#start-button object{
	height:100%;
	width:100%;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    transition-property: transform;
    transition-duration: 1s;
}
#start-button object:hover{
	cursor:pointer;
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    animation-name: rotate; 
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
header{
	width:100%;
	height:50%;
	background-color:#C90;
    -webkit-transition: display 3s;
    -moz-transition: display 3s;
    transition: display 3s;
}
content{
	height:0%;
	width:100%;
	background-color:#FFF;
    -webkit-transition: height 3s;
    -moz-transition: height 3s;
    transition: height 3s;
	
}
footer{
	width:100%;
	height:50%;
	background-color:#39F;
    -webkit-transition: display 3s;
    -moz-transition: display 3s;
    transition: display 3s;
}

</style>
</head>

<body>
  <div id="start-button">
    <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Dr_Manhattan_symbol.svg/550px-Dr_Manhattan_symbol.svg.png"> Para el correcto uso de este sitio es necesario soportar vectores. Por favor, utilice otro navegador.
    </object>
  </div>
  <header>
  
  </header>
  <article id="content">
  </article>
  <footer>
  
  </footer>
<!-- JAVASCRIPT -->
  <script type="text/javascript">
  var button=document.getElementById("start-button");
   button.addEventListener
   (
       "click",
       function()
       {
           this.style.display="none";
       }
   ) ;
   button.addEventListener
   (
       "click",
       function()
       {
           document.getElementById("content").style.height = "100%" ;
       }
   ) ;
   button.addEventListener
   (
       "click",
       function()
       {
			var elements  = document.getElementsByTagName("header");
			var length = elements.length;
			for (var i = 0; i < length; i++){
				elements[i].style.height="0%";
			}
       }
   ) ;
   button.addEventListener
   (
       "click",
       function()
       {
			var elements  = document.getElementsByTagName("footer");
			var length = elements.length;
			for (var i = 0; i < length; i++){
				elements[i].style.height="0%";
			}
       }
   ) ;
  </script>
<!-- FIN JAVASCRIPT -->
</body>
</html>