Cómo hacer texto parpadeante/intermitente con CSS 3

Contamos con el hallazgo a esta contratiempo, al menos eso creemos. Si continuas con alguna inquietud coméntalo y sin dudarlo te ayudaremos

Solución:

Estás primero configurando opacity: 1; y luego lo estás terminando 0por lo que comienza desde 0% y termina en 100%así que en su lugar simplemente establezca la opacidad en 0 a 50% y el resto se encargará de sí mismo.

Manifestación

.blink_me 
  animation: blinker 1s linear infinite;


@keyframes blinker 
  50% 
    opacity: 0;
  

BLINK ME

Aquí, estoy configurando la duración de la animación para que sea 1 secondy luego estoy configurando el timing a linear. Eso significa que será constante en todo momento. Por último, estoy usando infinite. Eso significa que seguirá y seguirá.

Nota: si esto no funciona para usted, use prefijos de navegador como
-webkit, -moz y así sucesivamente según sea necesario para animation y
@keyframes. Puedes consultar mi código detallado aquí

---

Como se comentó, esto no funcionará en versiones anteriores de Internet Explorer, y para eso necesita usar jQuery o JavaScript…

(function blink() 
  $('.blink_me').fadeOut(500).fadeIn(500, blink);
)();

^{Gracias a Alnitak por sugerir un mejor enfoque.}

Manifestación(Intermitente usando jQuery)

Utilizar el alternate valor por animation-direction (y no necesita agregar ningún keframe de esta manera).

alternate

La animación debe invertir la dirección de cada ciclo. Cuando se reproduce al revés, los pasos de la animación se realizan hacia atrás. Además, las funciones de temporización también se invierten; por ejemplo, una animación de entrada lenta se reemplaza por una animación de salida lenta cuando se reproduce al revés. El conteo para determinar si es una iteración par o impar comienza en uno.

CSS:

.waitingForConnection 
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  

@keyframes blinker  to  opacity: 0;  

he quitado el from fotograma clave Si falta, se genera a partir del valor que ha establecido para la propiedad animada (opacity en este caso) en el elemento, o si no lo ha configurado (y no lo ha hecho en este caso), desde el valor predeterminado (que es 1 por opacity).

Y, por favor, no use solo la versión de WebKit. Agregue el sin prefijo después de él también. Si solo desea escribir menos código, use la abreviatura.

.waitingForConnection 
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  

@keyframes blinker  to  opacity: 0;  

.waitingForConnection2 
  animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;  

@keyframes blinker2  to  opacity: 0;  

.waitingForConnection3 
  animation: blinker3 1s ease-in-out infinite alternate;  

@keyframes blinker3  to  opacity: 0;  

X
Y
Z

La mejor manera de obtener un parpadeo puro de “100% encendido, 100% apagado”, como el viejo es así:

.blink 
  animation: blinker 1s step-start infinite;


@keyframes blinker 
  50% 
    opacity: 0;
  

BLINK

valoraciones y reseñas

Si te sientes incitado, eres capaz de dejar un escrito acerca de qué le añadirías a esta sección.

---

---

Utiliza Nuestro Buscador