¿Cómo hacer que el texto parpadee / parpadee con CSS 3?

Actualmente, tengo este código:

@-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } 

Parpadea, pero solo parpadea en “una dirección”. Quiero decir, solo se desvanece, y luego aparece de nuevo con opacity: 1.0 , luego se desvanece, aparece de nuevo, y así sucesivamente … Me gustaría que se desvanezca, y luego “subir” de este desvanecimiento de nuevo a la opacity: 1.0 . ¿Es eso posible?

Primero está configurando la opacity: 1; y luego lo termina en 0 , por lo que comienza desde 0% y termina en 100% por lo que en su lugar, simplemente establezca la opacidad en 0 al 50% y el rest se solucionará solo.

Manifestación

 .blink_me { animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0; } } 
  

Use el valor alternate para animation-direction de la 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 en reversa, los pasos de animación se realizan hacia atrás. Además, las funciones de temporización también se invierten; por ejemplo, una animación facilitada se reemplaza con una animación de relajación cuando se reproduce en reversa. 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 eliminado el fotogtwig 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 valor (que es 1 para opacity ).

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

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

 .blink { animation: blinker 1s step-start infinite; } @keyframes blinker { 50% { opacity: 0; } } 
  

Alternativamente, si no desea una transición gradual entre mostrar y ocultar (por ejemplo, un cursor de texto parpadeante), podría usar algo como:

 /* Also use prefixes with @keyframes and animation to support current browsers */ @keyframes blinker { from { visibility: visible } to { visibility: hidden } /* Alternatively you can do this: 0% { visibility: visible; } 50% { visibility: hidden; } 100% { visibility: visible; } if you don't want to use `alternate` */ } .cursor { animation: blinker steps(1) 500ms infinite alternate; } 

Cada 1s .cursor pasará de visible a hidden .

Si la animación CSS no es compatible (por ejemplo, en algunas versiones de Safari) puede recurrir a este simple intervalo JS:

 (function(){ var show = 'visible'; // state var toggled by interval var time = 500; // milliseconds between each interval setInterval(function() { // Toggle our visible state on each interval show = (show === 'hidden') ? 'visible' : 'hidden'; // Get the cursor elements var cursors = document.getElementsByClassName('cursor'); // We could do this outside the interval callback, // but then it wouldn't be kept in sync with the DOM // Loop through the cursor elements and update them to the current state for (var i = 0; i < cursors.length; i++) { cursors[i].style.visibility = show; } }, time); })() 

Este simple JavaScript es en realidad muy rápido y en muchos casos puede ser incluso mejor que el CSS. Vale la pena señalar que hay muchas llamadas DOM que hacen que las animaciones JS sean lentas (por ejemplo, $ .animate () de JQuery).

También tiene la segunda ventaja de que si agrega elementos .cursor más adelante, todavía se .cursor exactamente al mismo tiempo que otros .cursor s ya que el estado se comparte, esto es imposible con CSS, hasta donde yo sé.

No sé por qué, pero animar solo la propiedad de visibility no funciona en ningún navegador.

Lo que puede hacer es animar la propiedad de opacity de tal manera que el navegador no tenga suficientes marcos para desvanecerse o desaparecer el texto.

Ejemplo:

 span { opacity: 0; animation: blinking 1s linear infinite; } @keyframes blinking { from, 49.9% { opacity: 0; } 50%, to { opacity: 1; } } 
 I'm blinking text 

Cambie la duración y la opacidad para adaptarse.

 .blink_text { -webkit-animation-name: blinker; -webkit-animation-duration: 3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; color: red; } @-moz-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.3; } 100% { opacity: 1.0; } } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.3; } 100% { opacity: 1.0; } } @keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.3; } 100% { opacity: 1.0; } } 
 @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } 

Tarde pero quería agregar uno nuevo con más fotogtwigs clave … aquí hay un ejemplo en CodePen ya que había un problema con los fragmentos de código incorporados:

  .block{ display:inline-block; padding:30px 50px; background:#000; } .flash-me { color:#fff; font-size:40px; -webkit-animation: flash linear 1.7s infinite; animation: flash linear 1.7s infinite; } @-webkit-keyframes flash { 0% { opacity: 0; } 80% { opacity: 1; color:#fff; } 83% { opacity: 0; color:#fff; } 86% { opacity: 1; color:#fff;} 89% { opacity: 0} 92% { opacity: 1; color:#fff;} 95% { opacity: 0; color:#fff;} 100% { opacity: 1; color:#fff;} } @keyframes flash { 0% { opacity: 0; } 80% { opacity: 1; color:#fff; } 83% { opacity: 0; color:#fff; } 86% { opacity: 1; color:#fff;} 89% { opacity: 0} 92% { opacity: 1; color:#fff;} 95% { opacity: 0; color:#fff;} 100% { opacity: 1; color:#fff;} }  Flash Me Hard