Простой цикл анимации CSS: постепенное появление и исчезновение «загрузки» текста

Чтобы создать циклическую анимацию в CSS, которая постепенно появляется и исчезает с текстом без использования JavaScript рассмотрите следующее:

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

Правило @keyframes определяет саму анимацию. В этом случае анимация просто меняет непрозрачность элемента с полностью непрозрачного на полностью прозрачный и обратно.

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

Класс .animate-flicker применяет анимацию к любому элементу этого класса. Свойство анимации определяет имя анимации, продолжительность каждой итерации (в данном случае 1 секунда) и то, должна ли анимация повторяться бесконечно.

Одна вещь, на которую следует обратить внимание: приведенный выше код может не работать. во всех браузерах. Чтобы обеспечить совместимость с более широким спектром браузеров, вам необходимо добавить в свойство анимации соответствующие префиксы поставщиков. Например:

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

С добавлением этих префиксов поставщиков анимация должна работать в большинстве современных браузеров.