Loop de animação CSS simples: Fade In & Out "Carregando" texto

Para criar uma animação em loop em CSS que faz fade in e fade out no texto sem usar JavaScript, considere o seguinte:

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

A regra @keyframes define a própria animação. Nesse caso, a animação simplesmente altera a opacidade do elemento de totalmente opaco para totalmente transparente e vice-versa.

.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

A classe .animate-flicker aplica a animação a qualquer elemento dessa classe. A propriedade de animação especifica o nome da animação, a duração de cada iteração (neste caso, 1 segundo) e se a animação deve se repetir infinitamente.

Uma coisa a observar é que o código acima pode não funcionar em todos os navegadores. Para garantir a compatibilidade com uma variedade maior de navegadores, você precisa adicionar os prefixos de fornecedor apropriados à propriedade da animação. Por exemplo:

.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

Com esses prefixos de fornecedores adicionados, a animação deve funcionar na maioria dos navegadores modernos.