Question

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 que no se desplace, esta animación no es al pasar el ratón, si no cuando carga la página:

CSS del div:

div#circulo {
    z-index: 999;   
    width:250; 
    height:200px;   

    -webkit-animation-name: opacidad, giro;
    -webkit-animation-duration: 2s, 2s;
    //-webkit-animation-timing-function: linear; 
    //-webkit-transform-origin: center center; 

    -moz-animation-name: opacidad, giro;
    -moz-animation-duration: 2s, 2s;
    //-moz-animation-timing-function: linear;
    //-moz-transform-origin: center center;

    animation-name: opacidad, giro; 
    animation-duration: 2s, 2s; 
    //animation-timing-function: linear;
    //transform-origin: center center;
}

@-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) translate(0, 0); } 
    to   { -webkit-transform: rotate(15turn) translate(0, 0);}
}

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

He probado varias configuraciones y no consigo arreglarlo, a ver si me podeis ayudar. Gracias

Comments

Se me olvido indicar que este div lo centraba con esta clase:

.centrado-porcentual {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);    
    -ms-transform: translate(-50%, -50%);
}

Ahora lo que he hecho es integrar la clase al div:

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

Pero el div sigue apareciendo un poco desplazado abajo a la derecha, luego cuando termina la animación entonces se posiciona centrado como debe de estar.

¿Alguna idea de porque se desplaza al principio?

Editado: esto no es una respuesta, es una ampliación a la pregunta.

---

Refloto esta pregunta, por que a día de hoy sigo sin ver el problema.

Answer 1

Pues al final lo solucione con la propiedad display:flex; y algún arreglo más:

.contenedor {
  position:absolute;
  display:flex;
  width:100%;
  height:100%; 
  top: 0;
}
div#circulo {
  margin:auto;
    width:250px; 
    height:200px; 
    top: 0;  
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -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);}
}

div#circulo:hover {
   opacity: 0.9;
   transform: scale(1.1);
}