Al rotar un div con CSS se desplaza de lugar

[bichomen]

Cuando aplico a a un <div> el estilo animado de rotación me gira, pero se desplaza, aunque luego vuelve a su posición original, yo lo que quiero que gire, pero sin desplazamiento, esta animación no es al pasar el ratón, si no cuando carga la página:

Código:

div#circulo {
    z-index: 999;   
    position:absolute;  
    width:250px; 
    height:200px;   
    left: 50%;
   top: 50%; 

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);

    -webkit-animation-name: opacidad, giro;
    -webkit-animation-duration: 2s, 2s;

    -moz-animation-name: opacidad, giro;
    -moz-animation-duration: 2s, 2s;

    animation-name: opacidad, giro; 
    animation-duration: 2s, 2s;     
}

@-webkit-keyframes opacidad {
    from { -webkit-opacity: 0; }
    to   { -webkit-opacity: 1; }
}

@-moz-keyframes opacidad {
    from { -moz-opacity: 0; }
    to   { -moz-opacity: 1; }
} 

@-webkit-keyframes giro {
    from { -webkit-transform: rotate(0turn); } 
    to   { -webkit-transform: rotate(15turn);}
}

@-moz-keyframes giro {
    from { -moz-transform: rotate(0turn); }
    to   { -moz-transform: rotate(15turn);}
}

¿Donde esta el error?


bichomen