Animação de rotação sem fim CSS

146

Quero fazer uma rotação do meu ícone de carregamento por CSS.

Eu tenho um ícone e o seguinte 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>

Mas isso não funciona. Como o ícone pode ser girado usando CSS?

css animation webkit Alexander Ruliov
fonte
3
solução fundada - jsfiddle.net/LwwfG responda por favor, para fechar a pergunta.
Alexander Ruliov
3
Você pode adicionar sua própria resposta. Nele, inclua o código de dentro da sua demonstração do jsFiddle.
thirtydot

Respostas:

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 snippet

Kirk Strobeck
fonte
12
uma pergunta, são -moz-e -ms-prefixos necessários em -webkit-keyframes? como apenas o webkit irá ler, -webkit-keyframesacredito que seja seguro removê-los.
precisa saber é o seguinte
2
Estou correto ao entender que isso não é teoricamente perfeito, já que as propriedades com prefixo que não são do fornecedor sempre devem ser as últimas para não substituir o comportamento compatível com os padrões? Veja: css-tricks.com/ordering-css3-properties
Legal. Estava verificando antes de editar. Não tinha 100% de certeza.
@ Ricky - Dica: Quando você já discutiu uma edição com o autor (como acima), não é uma má idéia mencionar isso nos "comentários de edição". Assim, a edição não é rejeitado como uma "mudança radical" ;-)
Leigh
1
Se você estiver usando o PostCSS, considere usar o autoprefixer para lidar com todos os problemas entre navegadores quando estiver usando transform.
Michał Pietraszko 28/03
88

Working nice:

#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 snippet

Alexander Ruliov
fonte
existe alguma solução cross-browser css disponível?
Andrej
13

Animação de rotação infinita em 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 snippet

MDN - Animação CSS da Web

Roko C. Buljan
fonte
6

Sem prefixos, por exemplo, é mais simples:

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

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
Dorian
fonte
5

Funciona em todos os navegadores modernos

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}
Kareem
fonte
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
fonte
1

Rotação em adicionar classe .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
fonte
1 
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}
vinkal
fonte
3
Olá, bem-vindo ao Stack Overflow! Ao responder a uma pergunta, você deve incluir algum tipo de explicação, como o que o autor fez de errado e o que você fez para corrigi-lo. Estou lhe dizendo isso porque sua resposta foi sinalizada como de baixa qualidade e está sendo revisada no momento. Você pode editar sua resposta clicando no botão "Editar".
Federico Grandi