Imitando uma tag de piscamento com animações CSS3

149

Eu realmente quero fazer um pedaço de texto piscar no estilo da velha escola sem usar javascript ou decoração de texto.

Sem transições, apenas * piscam *, * piscam *, * piscam *!


EDIT : Isso é diferente dessa pergunta, porque eu peço piscar sem transições contínuas, enquanto o OP das outras perguntas pergunta como substituir o piscar por transições contínuas

m93a
fonte
1
Infelizmente, a melhor resposta que encontrei para isso foi excluída pelo pôster original, @ m93a, por isso ainda não pode ser votada. Acho que a resposta deve ser excluída e votada, já que é a solução mais simples que produz o melhor efeito de piscada e funciona em todas as versões atuais dos principais navegadores . Você também pode ler um pequeno post na mesma solução em Emulating <blink> usando a animação WebKit CSS3 .
O que não entendo é por que todas as respostas aqui parecem ter a @-webkit-keyframesregra após a @keyframesregra não fixada , e algumas até têm a -webkit-animationdeclaração após a não corrigida.
BoltClock
@BoltClock: É porque as animações CSS3 são relativamente novas e ainda não estáveis ​​nos navegadores Webkit. O chamado "prefixo" está aqui para desenvolvedores que desejam usar animações, mesmo que sejam instáveis ​​e não tenham terminado.
M93a
@ m93a: Eu sei disso, mas estou perguntando por que eles foram colocados após a regra não fixada e não antes dela (aparentemente, não incluí essa frase no meu comentário original, meu erro).
BoltClock
1
Possível duplicata de Como fazer texto piscando / piscando com css3?
Brad Werth

Respostas:

242

O Netscape original <blink>tinha um ciclo de trabalho de 80%. Isso chega bem perto, embora o real <blink>apenas afete o texto:

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
This is <span class="blink">blinking</span> text.

Você pode encontrar mais informações sobre as animações de quadro-chave aqui .

Neil
fonte
2
Sim, é muito mais simples. Você pode adicionar o prefixo do kit da web para fazê-lo funcionar no Chrome e Safari.
M93a
2
Isso pode não funcionar no Chrome / safari sem os prefixos do kit da web.
David Pelaez
2
O que eu gosto de fazer é, em vez de fazer piscar uma classe, fazer piscar uma tag (com blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }). Dessa forma, você pode apenas usar a <blink>tag, em vez de <span class="blink">=)
416E64726577
Nota: Esta é apenas a imitação "<blink> solicitada" do OP. Não pode ser usado com a colorpropriedade ie como uma animação piscante "on-off".
Martin Schneider
97

Deixe-me mostrar um pequeno truque.

Como o Arkanciscan disse , você pode usar transições CSS3. Mas sua solução parece diferente da tag original.

O que você realmente precisa fazer é o seguinte:

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;
}
<span class="blink">Blink</span>

JSfiddle Demo

m93a
fonte
@ Quarenta e Dois Desculpe, esqueci o prefixo -webkit- . Acho que funcionou para todos os navegadores, exceto o Chrome e o Safari. Agora, após a atualização, ele deve funcionar para Firefox, Chrome, Opera, Safari e MSIE10.
M93a
Como está escrito, esta resposta realmente funcionará nas versões atuais do Firefox, Chrome, Safari e IE .
2
Não funcionou devido a um erro de digitação: na parte do webkit, o nome da animação blinkestava ausente. Fixo.
Andrea Ligios 04/04
1
Funciona bem, obrigado, aqui está a minha aplicação com base na sua solução: jsfiddle.net/gnx4mqc4
Hamid Behnam
1
@ m93a: As 0% 100% { opacity: 1.0; }seções parecem supérfluas, pois são padrão, não?
Jamadagni
48

Experimente este CSS

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
} 
This is <span class="blink">blink</span>

Você precisa de prefixos específicos de navegador / fornecedor: http://jsfiddle.net/es6e6/1/ .

Belyash
fonte
1
Não há nada como -ms-animation ou -o-animation e -moz-animation estava apenas na versão 15, não o use agora. Veja caniuse.com para ver o suporte real. Desculpe, mas não vou aceitar esta pergunta :( PS: Você pode usar 'editar' nas respostas de outras pessoas.
m93a
É apenas o meu velho mau hábito - adicione sufixos a todas as novas propriedades CSS3. Resposta atualizada.
Belyash
isso não é "piscar", mas "piscar-desaparecer".
Martin Schneider
30

Na verdade, não há necessidade visibilityou opacity- você pode simplesmente usar color, que tem a vantagem de manter qualquer "piscante" apenas no texto:

blink {
    display: inline;
    color: inherit;
    animation: blink 1s steps(1) infinite;
    -webkit-animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }
Here is some text, <blink>this text will blink</blink>, this will not.

Fiddle: http://jsfiddle.net/2r8JL/

SB
fonte
4
Maravilhoso! Esta é a única solução que fornece apenas texto piscando. Todas as outras soluções também piscam no fundo do elemento. Para testar, use a <span>com branco no texto azul contra a <body>com fundo verde. Somente nesta solução, o fundo azul da amplitude não piscará.
Jamadagni
10

Eu estou indo para o inferno por isso:

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content


+keyframes(blink)
  25%
    zoom: 1
    opacity: 1

  65%
    opacity: 1 

  66%
    opacity: 0

  100%
    opacity: 0

body
  font-family: sans-serif
  font-size: 4em
  background: #222
  text-align: center

  .blink
    color: rgba(#fff, 0.9)
    +animation(blink 1s 0s reverse infinite)
    +transform(translateZ(0))

.table
  display: table
  height: 5em
  width: 100%
  vertical-align: middle

  .cell
    display: table-cell
    width: 100%
    height: 100%
    vertical-align: middle

http://codepen.io/anon/pen/kaGxC (sass com bourbon)

airtonix
fonte
1
Seu codepen gera um Undefined mixin 'experimental'.erro e, portanto, parece que ele não será compilado e exibirá a animação intermitente.
6

Outra variação

.blink {
    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}
This is <span class="blink">blink</span>

Sasha Sofin
fonte
2

Está funcionando no meu caso, piscando o texto no intervalo de 1s.

.blink_me {
  color:#e91e63;
  font-size:140%;
  font-weight:bold;
  padding:0 20px 0  0;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0.4; }
}
Ajay Kumar
fonte
-3

se você quiser algum efeito de brilho, use este

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

atom-text-editor::shadow  .bracket-matcher .region {
    border:none;
    background-color: rgba(195,195,255,0.1);
    border-bottom: 1px solid rgb(155,155,255);
    box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
    border-radius: 3px;
    animation: blink 2s steps(115, start) infinite;
    -webkit-animation: blink 2s steps(115, start) infinite;
}
minaretsbayonet
fonte
-5

Encontre a solução abaixo para o seu código.

@keyframes blink {
  50% {
    color: transparent;
  }
}

.loader__dot {
  animation: 1s blink infinite;
}

.loader__dot:nth-child(2) {
  animation-delay: 250ms;
}

.loader__dot:nth-child(3) {
  animation-delay: 500ms;
}
Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>

Vishal Kiri
fonte