Cómo hacer parpadear / parpadear texto con CSS 3

Solución:

Tu eres el primero en configurar opacity: 1; y luego lo terminas en 0, entonces comienza desde 0% y termina en 100%, así que, en su lugar, establezca la opacidad en 0 a 50% y el resto se cuidará solo.

Manifestación

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink_me">BLINK ME</div>

Aquí, establezco la duración de la animación en 1 second, y luego estoy configurando el timing para 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 del 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 enfoque mejor.}

Manifestación (Blinker 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 en cada ciclo. Cuando se reproduce al revés, los pasos de la animación se realizan al revés. Además, las funciones de temporización también se invierten; por ejemplo, una animación de entrada fácil se reemplaza con una animación de salida fácil cuando se reproduce al revés. El recuento 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 eliminado 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 no utilice 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; } }

<div class="waitingForConnection">X</div>
<div class="waitingForConnection2">Y</div>
<div class="waitingForConnection3">Z</div>

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

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

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink">BLINK</div>

---

---

Utiliza Nuestro Buscador