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 nuevamente, aparece de nuevo, y así sucesivamente ...

Me gustaría que se desvaneciera, y luego "subir" de este desvanecimiento nuevamente opacity: 1.0. ¿Es eso posible?

Primero está configurando opacity: 1;y luego lo está terminando 0, por lo que comienza 0%y termina 100%, así que simplemente configure opacidad en 0at 50%y el resto se encargará de sí mismo.

Manifestación

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

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

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

Aquí, configuro la duración de la animación para que sea 1 second, y luego configuro la timingpara 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, -mozetc., según sea necesario para animationy @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 .}

Demostración (Blinker usando jQuery)

Use el alternatevalor para animation-direction(y no necesita agregar ningún marco de imagen de esta manera).

alternate

La animación debe invertir la dirección de cada ciclo. Cuando se juega en reversa, 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 facilitación se reemplaza con una animación de facilidad cuando se reproduce en reversa. 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 fromfotograma clave. Si falta, se genera a partir del valor que ha establecido para la propiedad animada ( opacityen este caso) en el elemento, o si no lo ha establecido (y no lo ha hecho en este caso), a partir del valor predeterminado (que es 1para opacity)

Y por favor no use solo la versión WebKit. Agregue el no prefijado después también. Si solo quieres escribir menos código, usa la taquigrafía .

La mejor manera de obtener un parpadeo puro de "100% encendido, 100% apagado", como el anterior, <blink>es así:

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

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

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

Alternativamente, si no desea una transición gradual entre mostrar y ocultar (por ejemplo, un cursor de texto parpadeante) puede 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;
}

Todo 1s .cursorirá de visiblea 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 realmente muy rápido y, en muchos casos, incluso puede ser un valor predeterminado 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 .cursorelementos más adelante, aún se animarán exactamente al mismo tiempo que los demás .cursor, ya que el estado es compartido, esto es imposible con CSS, que yo sepa.

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

Lo que puede hacer es animar la opacitypropiedad de tal manera que el navegador no tenga suficientes marcos para fundir o desvanecer el texto.

Ejemplo:

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}

<span>I'm blinking text</span>

Cambia la duración y la opacidad a tu gusto.

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

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.blink {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  animation: blinker 2s linear infinite;
  background-color: red;
  margin-right: 5px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<div class="content">
  <i class="blink"></i>
  LIVE
</div>

Tarde pero quería agregar uno nuevo con más fotogramas clave ... aquí hay un ejemplo en CodePen ya que hubo 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;}
}

<span class="block">
  <span class="flash-me">Flash Me Hard</span>
</span>

<style>
    .class1{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:#2a9fd4;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:45px;
    }
     .class2{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:green;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:65px;
    }
</style>
<script src="jquery-3.js"></script>
<script>
    $(document).ready(function () {
        $('#div1').addClass('class1');
        var flag = true;

        function blink() {
            if(flag)
            {
                $("#div1").addClass('class2');
                flag = false;
            }
            else
            { 
                if ($('#div1').hasClass('class2'))
                    $('#div1').removeClass('class2').addClass('class1');
                flag = true;
            }
        }
        window.setInterval(blink, 1000);
    });
</script>

Funciona para mí usando class = blink para los elementos respectivos

Código JS simple

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  


        },900);


        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element

        },1000);