¿Por qué no me funcionan los porcentajes transform:translate en Chrome?

[berkeleyPunk]

Buen día.

Mi problema es que que, en el código que mostraré a continuación, el transform:translate funciona de distintas formas según el navegador:

En Chrome: No se ve la transición (sí, si se ponen los valores del transalte en pixeles)
En Firefox: Se ve perfectamente la transición.
En Opera: Se ve la transición sólo de ida, no de vuelta.
En IE 11: Se ve perfectamente la transición.

Código CSS:

html, body {width:100%; height:100%;}
 
#content {
    position:relative;
    top:10%;
    left:0;
    width:50%;
    height:70%;
    margin:0 auto 0 auto;
    z-index:1001;
    border:1px solid yellow;
}
#cuadroNegro {
    position:absolute;
    top:35%;
    left:37%;
    width:25%;
    height:35%;
    background-color:black;
    z-index:1000;
}
#circulo_1 {
    position:absolute;
    top:52%;
    left:49%;
    width:5px;
    height:5px;
    opacity:1;
    z-index:1001;
    background-color:#F00;
    -webkit-transition:all ease 1s;
    -moz-transition:all ease 1s;
    -ms-transition:all ease 1s;
    -o-transition:all ease 1s;
    transition:all ease 1s;
}
#content:hover #circulo_1 {
    width:20%;
    height:25%;
    opacity:1;
    -webkit-transform:translate(-100%,-100%);
    -moz-transform:translate(-100%,-100%);
    -ms-transform:translate(-100%,-100%);
    -o-transform:translate(-100%,-100%);
    transform:translate(-100%,-100%);
}
 

Código HTML:

<div style="position:absolute; top:0; left:0; width:100%; height:100%;">
  <div id="content">
  
    <div id="cuadroNegro">
    </div>  
    
    <div id="circulo_1">1  
    </div>  
    
  </div>
</div>
 

Las preguntas sería: ¿Qué cambios tendría que hacer para que en Chrome se vea la transición utilizando porcentajes? y ¿cómo hacer para que Opera muestre la transición "de vuelta"?



Saludos cordiales.