Bucle de animación CSS simple: aparición y desaparición gradual de texto "cargando"

Para crear una animación en bucle en CSS que aparezca y desaparezca texto sin usar JavaScript, considere lo siguiente:

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

La regla @keyframes define la animación en sí. En este caso, la animación simplemente cambia la opacidad del elemento de completamente opaco a completamente transparente y viceversa.

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

La clase .animate-flicker aplica la animación a cualquier elemento con esa clase. La propiedad de animación especifica el nombre de la animación, la duración de cada iteración (en este caso, 1 segundo) y si la animación debe repetirse infinitamente.

Una cosa a tener en cuenta es que es posible que el código anterior no funcione en todos los navegadores. Para garantizar la compatibilidad con una gama más amplia de navegadores, debe agregar los prefijos de proveedor adecuados a la propiedad de animación. Por ejemplo:

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

Con estos prefijos de proveedores agregados, la animación debería funcionar en la mayoría de los navegadores modernos.