Simple CSS Animation Loop – Fading In & Out “Cargando” Texto

Sin Javascript, me gustaría hacer una clase simple de animación CSS de bucle que desvanece el texto de entrada y salida, infinitamente. No sé mucho sobre las animaciones de CSS, así que aún no lo he descubierto, pero aquí está lo lejos que he llegado:

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

Como dijo King King, debes agregar el prefijo específico del navegador. Esto debería cubrir la mayoría de los 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...

buscando una variación más simple, encontré esto:

es realmente inteligente, y supongo que también querrás agregar otras variaciones de navegadores, aunque me funcionó tanto en Chrome como en Firefox.

demo y 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 hacer que más de un elemento se desvanezcan secuencialmente, como 5 elementos que se desvanecen cada 4s,

1- hacer una animación única para cada elemento con animation-duration igual a [ 4s (duración para cada elemento) * 5 (número de elementos)] = 20s

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

2- obtener fotogtwig clave de animación para cada elemento.

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

3- defina el punto inicial y final para cada animación:

cada animación tiene una longitud de fotogtwig del 20% y el porcentaje @keyframes siempre comienza desde 0% , por lo que la primera animación comenzará desde 0% y finalizará en su fotogtwig (20%) y cada animación siguiente comenzará desde el punto final de animación anterior y finalizará alcanzar su marco (+ 20%),

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

ahora tenemos que hacer que cada animación se desvanezca de 0 a 1 opacidad y se desvanezca de 1 a 0,

entonces agregaremos otros 2 puntos (pasos) para cada animación después del inicio y antes del punto final para manejar la opacidad completa (1)

enter image description here

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

en realidad es un problema del navegador … use -webkit- para Chrome