Como fazer texto piscando / piscando com CSS 3

Atualmente, eu tenho 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;
}

Ele pisca, mas apenas pisca em "uma direção". Quero dizer, ele apenas desaparece e, em seguida, aparece novamente com opacity: 1.0, depois desaparece novamente, aparece novamente e assim por diante ...

Eu gostaria que desaparecesse e depois "aumentasse" desse desvanecimento novamente para opacity: 1.0. Isso é possível?

Você está definindo primeiro opacity: 1;e depois finalizando 0, para que comece 0%e termine; em 100%vez disso, apenas defina a opacidade para 0at 50%e o resto cuidará de si mesmo.

Demo

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

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

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

Aqui, estou definindo a duração da animação 1 seconde, em seguida, definindo o timingcomo linear. Isso significa que será constante o tempo todo. Por último, estou usando infinite. Isso significa que continuará indefinidamente.

Nota: Se isso não funcionar, use prefixos de navegador como -webkit, -mozetc., conforme necessário para animatione @keyframes. Você pode consultar meu código detalhado aqui

Como comentado, isso não funcionará em versões mais antigas do Internet Explorer e, para isso, você precisa usar jQuery ou JavaScript ...

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

^{Agradecemos a Alnitak por sugerir uma abordagem melhor .}

Demo (Blinker usando jQuery)

Use o alternatevalor para animation-direction(e você não precisa adicionar nenhum keframes dessa maneira).

alternate

A animação deve inverter a direção a cada ciclo. Ao reproduzir ao contrário, as etapas de animação são executadas para trás. Além disso, as funções de temporização também são revertidas; por exemplo, uma animação facilitada é substituída por uma animação facilitada quando reproduzida no sentido inverso. A contagem para determinar se é uma iteração par ou ímpar começa em uma.

CSS :

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

Eu removi o fromquadro - chave. Se estiver ausente, ele será gerado a partir do valor que você definiu para a propriedade animada ( opacityneste caso) no elemento, ou se você não a definiu (e não o fez neste caso), a partir do valor padrão (que é 1para opacity).

E por favor, não use apenas a versão WebKit. Adicione o não fixado depois dele também. Se você quiser apenas escrever menos código, use a abreviação .

A melhor maneira de obter um piscar puro "100% ligado, 100% desligado", como no antigo, <blink>é assim:

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

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

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

Como alternativa, se você não deseja uma transição gradual entre show e hide (por exemplo, um cursor de texto piscando), use 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;
}

Todos 1s .cursorirão de visiblepara hidden.

Se a animação CSS não for suportada (por exemplo, em algumas versões do Safari), você poderá recorrer a este intervalo simples de 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);
})()

Esse JavaScript simples é realmente muito rápido e, em muitos casos, pode até ser um padrão melhor que o CSS. Vale a pena notar que são muitas as chamadas DOM que tornam as animações JS lentas (por exemplo, $ .animate () do JQuery).

Ele também tem a segunda vantagem de que, se você adicionar .cursorelementos posteriormente, eles ainda serão animados exatamente ao mesmo tempo que outros .cursors, pois o estado é compartilhado; isso é impossível para o CSS, pelo que sei.

Não sei por que, mas animar apenas a visibilitypropriedade não está funcionando em nenhum navegador.

O que você pode fazer é animar a opacitypropriedade de forma que o navegador não tenha quadros suficientes para diminuir ou diminuir o texto.

Exemplo:

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>

Mude a duração e a opacidade para se adequar.

.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, mas queria adicionar um novo com mais quadros-chave ... aqui está um exemplo no CodePen, pois houve um problema com os trechos de código internos:

.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 mim usando class = blink para o (s) respectivo (s) elemento (s)

Código JS simples

// 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);