Como fazer texto piscando / piscando com CSS 3

288

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?

ojek
fonte
1
Se você der uma olhada no lado direito desta página, há uma coluna intitulada Relacionado com muitos tópicos 'relacionados'. Dê uma olhada em alguns deles. Você poderá estudar tudo o que precisa.
Milche Patern
2
Você pode tomar um curso rápido sobre as transições CSS em Bradshaw: css3.bradshawenterprises.com
Milche Patern
82
Sem ofensa, se ele quiser piscar seu texto, ele quer piscar seu texto. Não importa em que ano é. As pessoas mais inovadoras do mundo são aquelas que não cumprem as regras. Muito pelo contrário, eles geralmente os quebram e, a seguir, todos os copiam. Eu acho que a Apple é um ótimo exemplo. Mackie, etc, etc. Eu me sentiria melhor se as pessoas mantivessem suas opiniões e respondessem diretamente à pergunta :-) Como foi dito, sem ofensas. Parece um pouco duro, mas não quero provocar não ofender ninguém. Sem ressentimentos. ;-)
Lawrence
2
Possível duplicado de Imitando uma tag piscar com animações CSS3
Michael Freidgeim
Possível duplicata de Using CSS for fade-in effect on load page
zloctb

Respostas:

657

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)

Mr. Alien
fonte
7
Só notei que isso, aplicado a um elemento de texto, consome uma quantidade ridícula de CPU no meu computador usando o Firefox. Cuidado.
Alex
2
melhor resposta por ser a solução mais fácil de entender disponível
elad silver 17/05/2015
4
@ Mr.Alien não há sincronização entre os dois - o desbotamento levará um pouco mais que o cronômetro (e os cronômetros não são confiáveis ​​de qualquer maneira) e, eventualmente, você provavelmente acabará com uma fila ilimitada de animações enfileiradas no elemento. A abordagem correta seria dispensar o timer e a chamada "recursivamente" blinkercomo o retorno de chamada de conclusão para a .fadeInchamada.
Alnitak
3
@ Mr.Alien também a coisa toda poderia ser apenas um IIFE - essa linha fará a coisa toda, incluindo a invocação inicial: (function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
Alnitak
2
step-endem vez de linearera o que eu queria.
Alex S
71

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 .

Ana
fonte
Como fazê-lo piscar mais rápido? Mudar 1.7s estraga tudo.
Alex G
1
@AlexG você poderia substituir a cubic-bezierpeça com ease-in-outou qualquer outra coisa: cubic-bezier.com
Danilo Bargen
+ Um para cúbico-bezier, porque todas as coisas interessantes são não-linear
Agnius Vasiliauskas
57

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>

Timmmm
fonte
5
A única solução verdadeira "piscar". E também trabalha com colorpropriedades, etc. Outras coisas são soluções alternativas ou animações "fade".
Martin Schneider
15

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.

MattSturgeon
fonte
Isso funciona bem, EXCETO para iOS Safari. Alguma idéia de como fazê-lo funcionar no Safari?
21415 Joe Orost
@JoeOrost Incluí uma alternativa JS para navegadores que não suportam animações CSS. Na minha opinião, pode realmente ser uma solução melhor em geral!
MattSturgeon
14

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>

josketres
fonte
2
Isso é bobagem - basta usar step-start(veja minha resposta).
Timmmm 18/01/19
Perfeito, exatamente o que eu estava procurando. Afirmativo.
Samuel Ramzan
9

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; } 
}
James Hilliard
fonte
9
@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

onon15
fonte
4

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>

hsobhy
fonte
0
<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>
Shahaji
fonte
0

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);
Alfa
fonte