Saltar al contenido

Animación SVG rotar grupo alrededor de su centro

Después de tanto trabajar ya hallamos la contestación de este atascamiento que muchos usuarios de nuestra web tienen. Si tienes algo que compartir no dejes de aportar tu comentario.

Solución:

También puede solucionar cualquier problema del navegador con transform-origin mediante el uso de grupos anidados.




De esa forma, la rotación de CSS funciona en un grupo que cree que está centrado en el origen. Entonces el elemento permanece en su lugar.

svg 
	width: 50%;


/* Rotate around the circle center */

#Circleelement 
    -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);






/* _x31_ */
#_x31_, #_x32_7, #_x33_1, #_x31_3 
   	-webkit-animation: flickerAnimation 3s infinite;
   	-moz-animation: flickerAnimation 3s infinite;
   	-o-animation: flickerAnimation 3s infinite;
    animation: flickerAnimation 3s infinite;
	animation-delay: 0s;
   	-webkit-animation-delay: 0s;
   	-moz-animation-delay: 0s;
   	-o-animation-delay: 0s; 


@keyframes flickerAnimation 
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-o-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-moz-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-webkit-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 


/* _x32_ */
#_x32_, #_x32_8, #_x32_3, #_x31_0 
	animation: flickerAnimation 9s infinite;
   	-webkit-animation: flickerAnimation 9s infinite;
   	-moz-animation: flickerAnimation 9s infinite;
   	-o-animation: flickerAnimation 9s infinite;
   	animation-delay: 0.5s;
   	-webkit-animation-delay: 0.5s;
   	-moz-animation-delay: 0.5s;
   	-o-animation-delay: 0.5s;    


@keyframes flickerAnimation 
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-o-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-moz-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-webkit-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 


/* _x3_ */
#_x33_, #_x33_2, #_x32_5, #_x31_7 
   	-webkit-animation: flickerAnimation 13s infinite;
   	-moz-animation: flickerAnimation 13s infinite;
   	-o-animation: flickerAnimation 13s infinite;
    animation: flickerAnimation 13s infinite;
	animation-delay: 0.75s;
   	-webkit-animation-delay: 0.75s;
   	-moz-animation-delay: 0.75s;
   	-o-animation-delay: 0.75s; 


@keyframes flickerAnimation 
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-o-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-moz-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-webkit-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 


/* _x34_ */
#_x34_, #_x32_4, #_x33_6, #_x33_5, #_x31_5 
   	-webkit-animation: flickerAnimation 23s infinite;
   	-moz-animation: flickerAnimation 23s infinite;
   	-o-animation: flickerAnimation 23s infinite;
    animation: flickerAnimation 23s infinite;
	animation-delay: 0s;
   	-webkit-animation-delay: 0s;
   	-moz-animation-delay: 0s;
   	-o-animation-delay: 0s; 


@keyframes flickerAnimation 
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-o-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-moz-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-webkit-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 


/* _x35_ */
#_x35_, #_x32_2, #_x33_0, #_x31_9 
   	-webkit-animation: flickerAnimation 15s infinite;
   	-moz-animation: flickerAnimation 15s infinite;
   	-o-animation: flickerAnimation 15s infinite;
    animation: flickerAnimation 15s infinite;
	animation-delay: 1s;
   	-webkit-animation-delay: 1s;
   	-moz-animation-delay: 1s;
   	-o-animation-delay: 1s; 


@keyframes flickerAnimation 
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-o-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-moz-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-webkit-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 


/* _x36_ */
#_x36_, #_x32_0, #_x32_9, #_x31_1 
   	-webkit-animation: flickerAnimation 18s infinite;
   	-moz-animation: flickerAnimation 18s infinite;
   	-o-animation: flickerAnimation 18s infinite;
    animation: flickerAnimation 18s infinite;
	animation-delay: 1.5s;
   	-webkit-animation-delay: 1.5s;
   	-moz-animation-delay: 1.5s;
   	-o-animation-delay: 1.5s; 


@keyframes flickerAnimation 
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-o-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-moz-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-webkit-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 


/* _x37_ */
#_x37_, #_x33_4, #_x31_2 
   	-webkit-animation: flickerAnimation 6s infinite;
   	-moz-animation: flickerAnimation 6s infinite;
   	-o-animation: flickerAnimation 6s infinite;
    animation: flickerAnimation 6s infinite;
	animation-delay: 0.5s;
   	-webkit-animation-delay: 0.5s;
   	-moz-animation-delay: 0.5s;
   	-o-animation-delay: 0.5s; 


@keyframes flickerAnimation 
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-o-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-moz-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-webkit-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 


/* _x38_ */
#_x38_, #_x32_6, #_x31_6 
   	-webkit-animation: flickerAnimation 10s infinite;
   	-moz-animation: flickerAnimation 10s infinite;
   	-o-animation: flickerAnimation 10s infinite;
    animation: flickerAnimation 10s infinite;
	animation-delay: 0.2s;
   	-webkit-animation-delay: 0.2s;
   	-moz-animation-delay: 0.2s;
   	-o-animation-delay: 0.2s; 


@keyframes flickerAnimation 
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-o-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-moz-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-webkit-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 


/* _x39_ */
#_x39_, #_x33_3, #_x31_4 
   	-webkit-animation: flickerAnimation 25s infinite;
   	-moz-animation: flickerAnimation 25s infinite;
   	-o-animation: flickerAnimation 25s infinite;
    animation: flickerAnimation 25s infinite;
	animation-delay: 0.8s;
   	-webkit-animation-delay: 0.8s;
   	-moz-animation-delay: 0.8s;
   	-o-animation-delay: 0.8s; 


@keyframes flickerAnimation 
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-o-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-moz-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-webkit-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 


/* _x31_0 */
#_x31_0, #_x32_1, #_x31_8 
   	-webkit-animation: flickerAnimation 30s infinite;
   	-moz-animation: flickerAnimation 30s infinite;
   	-o-animation: flickerAnimation 30s infinite;
    animation: flickerAnimation 30s infinite;
	animation-delay: 2s;
   	-webkit-animation-delay: 2s;
   	-moz-animation-delay: 2s;
   	-o-animation-delay: 2s; 


@keyframes flickerAnimation 
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-o-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-moz-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 

@-webkit-keyframes flickerAnimation
  0%    opacity:1; 
  50%   opacity:0; 
  100%  opacity:1; 


Necesitas establecer un transform-origin

#Circleelement 
    transform-origin:center;

Demostración de jsfiddle

Artículo de CSS-Tricks

Nota: El punto base de ‘origen’ para SVG puede ser diferente entre navegadores. El ejemplo anterior funciona en Chrome pero es posible que no en FF. Hay una serie de preguntas en SO relacionadas con este punto.

Solo usa transform-box: fill-box; en ese elemento, o en todos los elementos.

Finalizando este artículo puedes encontrar las acotaciones de otros programadores, tú asimismo tienes la opción de insertar el tuyo si te gusta.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *