Imitazione di un tag lampeggiante con animazioni CSS3


149

Voglio davvero far lampeggiare un pezzo di testo nello stile della vecchia scuola senza usare javascript o la decorazione del testo.

Nessuna transizione, solo * lampeggio *, * lampeggio *, * lampeggio *!


EDIT : Questo è diverso da questa domanda perché chiedo di battere le palpebre senza transizioni continue, mentre OP delle altre domande chiede come sostituire il lampeggiamento con transizioni continue


1
La migliore risposta che ho trovato per questo è stata purtroppo cancellata dal poster originale, @ m93a, quindi non può essere ancora votata. Penso che la risposta dovrebbe essere non cancellata e votata, poiché è la soluzione più semplice che produce il miglior effetto lampeggiante e funziona in tutte le versioni correnti dei principali browser . Puoi anche leggere un breve post sul blog sulla stessa soluzione in Emulazione di <blink> usando l'animazione CSS3 di WebKit .

Quello che non capisco è perché ogni singola risposta qui sembra avere la @-webkit-keyframesregola dopo la @keyframesregola non prefissata , e alcuni hanno persino la -webkit-animationdichiarazione dopo quella non prefissata.
BoltClock

@BoltClock: è perché le animazioni CSS3 sono relativamente nuove e non ancora stabili nei browser Webkit. Il cosiddetto "prefisso" è qui per gli sviluppatori che vogliono usare le animazioni anche se sono instabili e non finite.
m93a,

@ m93a: lo so, ma mi sto chiedendo perché siano inseriti dopo la regola non prefissata e non prima di essa (apparentemente non ho incluso quella frase nel mio commento originale, il mio errore).
BoltClock

Risposte:


242

Il Netscape originale <blink>aveva un ciclo di lavoro dell'80%. Questo si avvicina molto, sebbene il reale <blink>influisca solo sul testo:

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

Puoi trovare maggiori informazioni sulle animazioni dei fotogrammi chiave qui .


2
Sì, è molto più semplice. Puoi aggiungere il prefisso webkit per farlo funzionare in Chrome e Safari.
m93a,

2
Questo potrebbe non funzionare su Chrome / safari senza i prefissi webkit.
David Pelaez,

2
Quello che mi piace fare è, invece di fare battere le palpebre una classe, fare battere le palpebre un tag (con blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }). In questo modo, puoi semplicemente utilizzare il <blink>tag, anziché <span class="blink">=)
416E64726577

Nota: questa è solo la "<blink> imitazione" del PO richiesto. Non utilizzabile con ie colorproprietà come animazione "on-off" -blink.
Martin Schneider,

97

Lascia che ti mostri un piccolo trucco.

Come ha detto Arkanciscan , puoi usare le transizioni CSS3. Ma la sua soluzione sembra diversa dal tag originale.

Quello che devi davvero fare è questo:

@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


@ Quarantadue Mi dispiace, ho dimenticato il prefisso -webkit- . Ha funzionato, credo, per tutti i browser attuali tranne Chrome e Safari. Ora, dopo l'aggiornamento, dovrebbe funzionare per Firefox, Chrome, Opera, Safari e MSIE10.
m93a,

Come scritto, questa risposta funzionerà davvero nelle versioni attuali di Firefox, Chrome, Safari e IE .

2
Non ha funzionato a causa di un errore di battitura: nella parte webkit blinkmancava il nome dell'animazione . Fisso.
Andrea Ligios,

1
Funziona bene, grazie, ecco la mia implementazione basata sulla tua soluzione: jsfiddle.net/gnx4mqc4
Hamid Behnam

1
@ m93a: le 0% 100% { opacity: 1.0; }sezioni sembrano superflue, dal momento che sono predefinite, no?
Jamadagni,

48

Prova questo 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>

Sono necessari prefissi specifici per browser / fornitore: http://jsfiddle.net/es6e6/1/ .


1
Non c'è niente come -ms-animation o -o-animation e -moz-animation era solo nella versione 15, non usarlo ora. Guarda caniuse.com per vedere il supporto effettivo. Scusami ma non accetterò questa domanda :( PS: puoi usare 'modifica' sulle risposte degli altri.
m93a

È solo la mia vecchia cattiva abitudine: aggiungere suffissi a tutte le nuove proprietà CSS3. Risposta aggiornata.
Belyash,

questo non è "blink" ma "blink-fadeOut".
Martin Schneider,

30

In realtà non c'è bisogno di visibilityo opacity- puoi semplicemente usare color, che ha il vantaggio di mantenere qualsiasi "battito di ciglia" al solo testo:

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/


4
Meraviglioso! Questa è l'unica soluzione che fornisce il lampeggiamento del solo testo. Tutte le altre soluzioni lampeggiano anche sullo sfondo dell'elemento. Per provare, usa a <span>con testo bianco su blu contro a <body>con sfondo verde. Solo in questa soluzione, lo sfondo dell'intervallo blu non lampeggerà.
Jamadagni,

10

Sto andando all'inferno per questo:

=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 con bourbon)


1
Il tuo codice genera un Undefined mixin 'experimental'.errore e quindi sembra che non si compili e non visualizzi l'animazione del lampeggiamento.

6

Un'altra variazione

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


2

Nel mio caso funziona lampeggiando il testo a intervalli di 1 secondo.

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

-3

se vuoi un effetto bagliore usa questo

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

-5

Di seguito trovi la soluzione per il tuo codice.

@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>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.