Come rendere il testo lampeggiante / lampeggiante con CSS 3


288

Attualmente, ho questo codice:

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

Lampeggia, ma lampeggia solo in "una direzione". Voglio dire, svanisce e poi riappareopacity: 1.0 , poi svanisce di nuovo, appare di nuovo e così via ...

Vorrei che svanisse, e poi "rilanciasse" da questa dissolvenza di nuovo a opacity: 1.0. È possibile?


1
Se dai un'occhiata a destra di questa pagina, c'è una colonna intitolata Correlata con molti argomenti "correlati". Dai un'occhiata ad alcuni di quelli ... sarai in grado di studiare tutto ciò di cui hai bisogno.
Milche Patern

2
Puoi seguire un breve corso sulle transizioni css su bradshaw
Milche Patern

82
Senza offesa, se vuole sbattere le palpebre sul suo testo, vuole sbattere le palpebre sul suo testo. Non importa che anno sia. Le persone più innovative al mondo sono quelle che non vivono secondo le regole. Al contrario, di solito li rompono e poi tutti li copiano. Immagino che Apple sia un ottimo esempio. Così è Mackie ecc. Ecc. Mi sentirei meglio se le persone si limitassero a mantenere le proprie opinioni e rispondessero alla domanda al punto :-) Come detto, senza offesa. Sembra un po 'duro ma non voglio provocare non offendere nessuno. Senza rancore. ;-)
Lawrence,


Possibile duplicato
dell'utilizzo

Risposte:


657

Prima stai impostando opacity: 1;e poi finisci 0, quindi inizia 0%e finisce 100%, quindi imposta l'opacità su 0at 50%e il resto si prenderà cura di se stesso.

dimostrazione

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

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink_me">BLINK ME</div>

Qui, io pongo la durata dell'animazione di essere 1 second, e poi io pongo l' timinga linear. Ciò significa che sarà costante per tutto. Infine, sto usando infinite. Ciò significa che andrà avanti all'infinito.

Nota: Se questo non funziona per voi, i prefissi uso browser come -webkit, -moze così via come richiesto per animatione @keyframes. Puoi fare riferimento al mio codice dettagliato qui


Come commentato, questo non funzionerà con le versioni precedenti di Internet Explorer e per questo è necessario utilizzare jQuery o JavaScript ...

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

Grazie ad Alnitak per aver suggerito un approccio migliore .

Demo (Blinker usando jQuery)


7
Ho appena notato che questo, applicato a un elemento di testo, consuma una quantità ridicola di CPU sul mio computer usando Firefox. Attenzione.
Alex,

2
la migliore risposta per essere la soluzione più facile da capire disponibile
elad silver

4
@ Mr.Alien non c'è sincronizzazione tra i due - le dissolvenze impiegheranno un po 'più del timer (e comunque i timer non sono affidabili) e alla fine probabilmente finirai con una coda illimitata di animazioni in coda sull'elemento. L'approccio corretto sarebbe fare a meno del timer e chiamare "ricorsivamente" blinkercome callback di completamento della .fadeInchiamata.
Alnitak,

3
@ Mr.Alien anche il tutto potrebbe essere solo un IIFE - questa riga farà il tutto compreso l'invocazione iniziale: (function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
Alnitak,

2
step-endinvece di linearquello che volevo.
Alex S,

71

Utilizzare il alternatevalore per animation-direction(e non è necessario aggiungere alcun fotogramma in questo modo).

alternate

L'animazione dovrebbe invertire la direzione ad ogni ciclo. Quando si suona al contrario, i passaggi dell'animazione vengono eseguiti all'indietro. Inoltre, anche le funzioni di temporizzazione sono invertite; ad esempio, un'animazione easy-in viene sostituita con un'animazione easy-out quando riprodotta al contrario. Il conteggio per determinare se si tratta di un'iterazione pari o dispari inizia da uno.

CSS :

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

Ho rimosso il fromfotogramma chiave. Se manca, viene generato dal valore che hai impostato per la proprietà animata ( opacityin questo caso) sull'elemento, o se non l'hai impostato (e in questo caso non lo hai fatto), dal valore predefinito (che è 1per opacity).

E per favore non usare solo la versione di WebKit. Aggiungi anche quello non prefissato. Se vuoi solo scrivere meno codice, usa la scorciatoia .


Come farlo lampeggiare più velocemente? Cambiare 1.7s lo rovina.
Alex G,

1
@AlexG potresti sostituire la cubic-bezierparte con ease-in-outo qualcos'altro: cubic-bezier.com
Danilo Bargen

+ Uno per cubic-bezier, perché tutte le cose interessanti sono non lineari
Agnius Vasiliauskas

57

Il modo migliore per ottenere un battito di ciglia "100% acceso, 100% spento", come il vecchio <blink>è così:

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

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink">BLINK</div>


5
L'unica vera soluzione "lampeggiante". E funziona anche con colorproprietà ecc. Altre cose sono soluzioni alternative o animazioni "dissolvenza".
Martin Schneider,

15

In alternativa, se non si desidera una transizione graduale tra show e hide (ad esempio un cursore di testo lampeggiante) è possibile utilizzare qualcosa di simile:

/* 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;
}

Ogni 1s .cursor andrà da visibleahidden .

Se l'animazione CSS non è supportata (ad esempio in alcune versioni di Safari) è possibile eseguire il fallback a questo semplice intervallo 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);
})()

Questo semplice JavaScript è in realtà molto veloce e in molti casi potrebbe persino essere un valore predefinito migliore del CSS. Vale la pena notare che sono molte le chiamate DOM che rallentano le animazioni JS (ad esempio $ .animate () di JQuery).

Ha anche il secondo vantaggio che, se si aggiungono .cursorelementi in un secondo momento, si animeranno esattamente nello stesso momento degli altri .cursor, poiché lo stato è condiviso, per quanto ne so, questo è impossibile con i CSS.


Funziona bene TRANNE per iOS Safari. Qualche idea su come farlo funzionare su Safari?
Joe Orost,

@JoeOrost Ho incluso un'alternativa JS per i browser che non supportano le animazioni CSS. Secondo me in realtà potrebbe essere una soluzione migliore in generale!
MattSturgeon,

14

Non so perché, ma l'animazione della visibilityproprietà non funziona su nessun browser.

Quello che puoi fare è animare la opacityproprietà in modo tale che il browser non abbia abbastanza frame per sfumare dentro o fuori il testo.

Esempio:

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>


2
Questo è sciocco - basta usare step-start(vedi la mia risposta).
Timmmm,

Perfetto, proprio quello che stavo cercando. Pollice su.
Samuel Ramzan,

9

Modifica la durata e l'opacità in base alle tue esigenze.

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

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


4

In ritardo, ma volevo aggiungerne uno nuovo con più fotogrammi chiave ... ecco un esempio su CodePen poiché si è verificato un problema con gli snippet di codice integrati:

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


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>

0

Funziona per me usando class = blink per i rispettivi elementi

Codice JS semplice

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