Простая анимационная петля для CSS - Fading In & Out "Загрузка" текста

Без Javascript я хотел бы создать простой цикл анимации CSS, который постепенно и постепенно исчезает в тексте. Я не очень много знаю о анимации CSS, поэтому я еще не понял, но вот как далеко я получил:

@keyframes flickerAnimation { /* flame pulses */
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

Ответы

Ответ 1

Как сказал King King, вы должны добавить префикс для браузера. Это должно охватывать большинство браузеров:

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}
<div class="animate-flicker">Loading...</div>

Ответ 2

Ищем более простой вариант. Я нашел это:

он по-настоящему умный, и я думаю, вы могли бы захотеть добавить другие варианты браузеров, хотя это сработало для меня как в Chrome, так и в Firefox.

demo and credit = > http://codepen.io/Ahrengot/pen/bKdLC

@keyframes fadeIn { 
  from { opacity: 0; } 
}

.animate-flicker {
    animation: fadeIn 1s infinite alternate;
}
<h2 class="animate-flicker">Jump in the hole!</h2>

Ответ 3

Чтобы сделать несколько элементов постепенным затуханием, например, 5 элементов затухают каждые 4s,

1- создавать уникальную анимацию для каждого элемента с animation-duration равным [ 4s (продолжительность для каждого элемента) * 5 (количество элементов)] = 20s

animation-name: anim1 , anim2, anim3 ... 
animation-duration : 20s, 20s, 20s ...

2- получить анимационный ключевой кадр для каждого элемента.

100% (keyframes percentage) / 5 (elements) = 20% (frame for each element)

3- определить начальную и конечную точки для каждой анимации:

каждая анимация имеет длину кадра 20%, а процентная доля @keyframes всегда начинается с 0%, поэтому первая анимация начнется с 0% и закончится в его кадре (20%), и каждая следующая анимация начинается с предыдущей конечной точки анимации и заканчивается, когда она достигает его кадра (+ 20%),

@keyframes animation1 { 0% {}, 20% {}}
@keyframes animation2 { 20% {}, 40% {}}
@keyframes animation3 { 40% {}, 60% {}}
and so on

теперь нам нужно заставить каждую анимацию затухать от 0 до 1 непрозрачности и исчезать от 1 до 0,

поэтому мы добавим еще 2 пункта (шагов) для каждой анимации после начала и до окончания точки для обработки полной непрозрачности (1)

введите описание изображения здесь

http://codepen.io/El-Oz/pen/WwPPZQ

.slide1 {
    animation: fadeInOut1 24s ease reverse forwards infinite
}

.slide2 {
    animation: fadeInOut2 24s ease reverse forwards infinite
}

.slide3 {
    animation: fadeInOut3 24s ease reverse forwards infinite
}

.slide4 {
    animation: fadeInOut4 24s ease reverse forwards infinite
}

.slide5 {
    animation: fadeInOut5 24s ease reverse forwards infinite
}

.slide6 {
    animation: fadeInOut6 24s ease reverse forwards infinite
}

@keyframes fadeInOut1 {
    0% { opacity: 0 }
    1% { opacity: 1 }
    14% {opacity: 1 }
    16% { opacity: 0 }
}

@keyframes fadeInOut2 {
    0% { opacity: 0 }
    14% {opacity: 0 }
    16% { opacity: 1 }
    30% { opacity: 1 }
    33% { opacity: 0 }
}

@keyframes fadeInOut3 {
    0% { opacity: 0 }
    30% {opacity: 0 }
    33% {opacity: 1 }
    46% { opacity: 1 }
    48% { opacity: 0 }
}

@keyframes fadeInOut4 {
    0% { opacity: 0 }
    46% { opacity: 0 }
    48% { opacity: 1 }
    64% { opacity: 1 }
    65% { opacity: 0 }
}

@keyframes fadeInOut5 {
    0% { opacity: 0 }
    64% { opacity: 0 }
    66% { opacity: 1 }
    80% { opacity: 1 }
    83% { opacity: 0 }
}

@keyframes fadeInOut6 {
    80% { opacity: 0 }
    83% { opacity: 1 }
    99% { opacity: 1 }
    100% { opacity: 0 }
}