Loop de Animação CSS Simples – Fading In & Out “Carregando” Texto

Sem o Javascript, gostaria de criar uma class de animação CSS de looping simples que reduza e diminua o texto, infinitamente. Eu não sei muito sobre animações CSS, então ainda não descobri, mas aqui está o quanto eu cheguei:

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

Como o Rei King disse, você deve adicionar o prefixo específico do navegador. Isso deve abranger a maioria dos navegadores:

 @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; } 
 
Loading...

bem procurando uma variação mais simples eu encontrei isso:

É realmente inteligente, e eu acho que você pode querer adicionar outras variações de navegadores também, embora funcionou para mim tanto no Chrome e no Firefox.

demonstração e crédito => http://codepen.io/Ahrengot/pen/bKdLC

 @keyframes fadeIn { from { opacity: 0; } } .animate-flicker { animation: fadeIn 1s infinite alternate; } 
 

Jump in the hole!

Para fazer mais de um elemento desaparecer / desaparecer sequencialmente, como 5 elementos desaparecem a cada 4s,

1- crie animações únicas para cada elemento com animation-duration igual a [ 4s (duração de cada elemento) * 5 (número de elementos)] = 20s

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

2- obter o quadro-chave de animação para cada elemento.

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

3- definir o ponto inicial e final de cada animação:

cada animação tem 20% de comprimento de quadro e a porcentagem de @keyframes sempre começa em 0% , então a primeira animação começará em 0% e terminará em seu quadro (20%), e cada próxima animação começará do ponto final da animação anterior e terminará quando alcançar seu quadro (+ 20%),

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

agora precisamos fazer com que cada animação passe de 0 para 1 opacidade e diminua de 1 para 0,

então vamos adicionar mais 2 pontos (passos) para cada animação depois de começar e antes de terminar o ponto para lidar com a opacidade completa (1)

insira a descrição da imagem aqui

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 } } 

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Na verdade, é um problema do navegador … use -webkit- para chrome