Como animar imagens em CSS para sempre

Neste artigo, abordaremos uma questão comum em torno de animações CSS3: fazê-las funcionar indefinidamente.

O desafio

Suponha que você tenha uma série de fotos que deseja exibir como uma apresentação de slides, fazendo uma transição suave entre elas usando animação CSS3. No entanto, você não está satisfeito com o comportamento padrão, onde a última foto desaparece e a página é recarregada, reiniciando efetivamente a apresentação de slides.

A solução

Para obter uma animação em loop contínua, precisamos para modificar o CSS para especificar que a animação deve iterar continuamente. Por padrão, as animações CSS são configuradas para serem executadas apenas uma vez.

A propriedade principal que adicionaremos ao nosso CSS é animation-iteration-count. Aqui está um exemplo:

@keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

Ao definir animation-iteration-count como infinite, a animação continuará em loop indefinidamente, criando uma transição perfeita entre suas fotos.