Animación de rotación sin fin CSS

146

Quiero hacer una rotación de mi icono de carga por CSS.

Tengo un ícono y el siguiente código:

<style>
#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
</style>

<div id='test' class='rotating'></div>

Pero no funciona. ¿Cómo se puede rotar el icono usando CSS?

css animation webkit Alexander Ruliov
fuente
3
solución fundada - jsfiddle.net/LwwfG responda por favor, para cerrar la pregunta.
Alexander Ruliov
3
Puedes agregar tu propia respuesta. En él, incluya el código desde su demo jsFiddle.
thirtydot

Respuestas:

263 

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}
<div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div>
Expandir fragmento

Kirk Strobeck
fuente
12
una pregunta, ¿son necesarios -moz-y -ms-prefijos bajo -webkit-keyframes? como solo el webkit leerá, -webkit-keyframescreo que es seguro eliminarlos.
Bor691
2
¿Estoy en lo cierto al entender que esto no es teóricamente perfecto ya que las propiedades prefijadas por el proveedor no siempre deben ser las últimas para no anular el comportamiento conforme a los estándares? Ver: css-tricks.com/ordering-css3-properties
Frio. Estaba revisando antes de editar. No estaba 100% seguro.
@Ricky - Sugerencia: cuando ya haya discutido una edición con el autor (como arriba), no es una mala idea mencionar eso en los "comentarios de edición". Por lo tanto, la edición no se rechaza como un "cambio radical" ;-)
Leigh
1
Si está utilizando PostCSS, considere usar el autocorrector para manejar todos los problemas de navegador cruzado cuando solo lo use transform.
Michał Pietraszko
88

Trabajando bien:

#test {
    width: 11px;
    height: 14px;
    background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');
}

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

.rotating {
    -webkit-animation: rotating 2s linear infinite;
}
<div id='test' class='rotating'></div>
Expandir fragmento

Alexander Ruliov
fuente
¿Hay alguna solución css crossbrowser disponible?
andrej
13

Animación de rotación infinita en CSS

/* ENDLESS ROTATE */
.rotate{
  animation: rotate 1.5s linear infinite; 
}
@keyframes rotate{
  to{ transform: rotate(360deg); }
}


/* SPINNER JUST FOR DEMO */
.spinner{
  display:inline-block; width: 50px; height: 50px;
  border-radius: 50%;
  box-shadow: inset -2px 0 0 2px #0bf;
}
<span class="spinner rotate"></span>
Expandir fragmento

MDN - Animación web CSS

Roko C. Buljan
fuente
6

Sin prefijos, por ejemplo, en su forma más simple:

.loading-spinner {
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
dorio
fuente
5

Funciona en todos los navegadores modernos.

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}
Kareem
fuente
1 
<style>
div
{  
     height:200px;
     width:200px;
     -webkit-animation: spin 2s infinite linear;    
}
@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

</style>
</head>

<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>
pradip kor
fuente
1

Rotación en agregar clase .active

  .myClassName.active {
                -webkit-animation: spin 4s linear infinite;
                -moz-animation: spin 4s linear infinite;
                animation: spin 4s linear infinite;
              }



@-moz-keyframes spin {
       100% {
        -moz-transform: rotate(360deg);
      }
     }
     @-webkit-keyframes spin {
      100% {
         -webkit-transform: rotate(360deg);
       }
     }
     @keyframes spin {
       100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
       }
     }
DINESH Adhikari
fuente
1 
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}
vinkal
fuente
3
Hola, bienvenido a Stack Overflow! Cuando responda una pregunta, debe incluir algún tipo de explicación, como qué hizo mal el autor y qué hizo para solucionarlo. Te digo esto porque tu respuesta se ha marcado como de baja calidad y actualmente se está revisando. Puede editar su respuesta haciendo clic en el botón "Editar".
Federico Grandi