Wie man blinkenden / flackernden Text mit CSS 3 erstellt

Question

Derzeit habe ich diesen Code:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: unendlich;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

Es blinkt, aber es blinkt nur in "eine Richtung". Ich meine, es verblassen nur, und dann erscheint es wieder mit opacity: 1.0, dann verblassen es wieder, erscheint wieder, und so weiter...

Ich möchte, dass es verblasset und dann von diesem Verblassen wieder zu opacity: 1.0 "erhöht". Ist das möglich?

Answer 1

Du setzt zuerst opacity: 1; und dann beendest du es auf 0, also beginnt es bei 0% und endet bei 100%, also setze einfach die Opazität auf 0 bei 50% und der Rest wird sich von selbst erledigen.

Demo

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

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

BLINK MICH

Hier setze ich die Animationsdauer auf 1 Sekunde und dann setze ich das Timing auf linear. Das bedeutet, dass es konstant bleibt. Zuletzt verwende ich infinite. Das bedeutet, dass es immer weitergeht.

Hinweis: Wenn das nicht funktioniert, verwende Browser-Präfixe wie -webkit, -moz und so weiter, wie für animation und @keyframes erforderlich. Sie können sich auf meinen ausführlichen Code hier beziehen.

---

Wie kommentiert, funktioniert dies nicht in älteren Versionen von Internet Explorer, und dafür musst du jQuery oder JavaScript verwenden...

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

Danke an Alnitak für die Empfehlung einen besseren Ansatz.

Demo (Blinker mit jQuery)

Answer 2

Der beste Weg, um ein reines "100% ein, 100% aus" Blinken zu erhalten, wie beim alten , ist wie folgt:

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

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

BLINK

Answer 3

Verwenden Sie den alternate Wert für animation-direction (und Sie müssen auf diese Weise keine Keyframes hinzufügen).

alternate

Die Animation soll in jeder Zyklusrichtung umkehren. Wenn rückwärts abgespielt wird, werden die Animationsschritte rückwärts ausgeführt. Darüber hinaus werden auch die Zeitfunktionen umgekehrt; beispielsweise wird eine Einblendanimation durch eine Ausblendanimation ersetzt, wenn sie rückwärts abgespielt wird. Der Zähler zur Bestimmung, ob es sich um eine gerade oder eine ungerade Iteration handelt, beginnt bei eins.

CSS:

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

Ich habe den from-Keyframe entfernt. Wenn er fehlt, wird er aus dem Wert generiert, den Sie für die animierte Eigenschaft festgelegt haben (opacity in diesem Fall) am Element, oder wenn Sie ihn nicht festgelegt haben (und in diesem Fall haben Sie es nicht), aus dem Standardwert (der für opacity 1 ist).

Und bitte verwenden Sie nicht nur die WebKit-Version. Fügen Sie danach auch die unprefixed hinzu. Wenn Sie nur weniger Code schreiben möchten, verwenden Sie die Kurzform.

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

.waitingForConnection2 {
  animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker2 { to { opacity: 0; } }

.waitingForConnection3 {
  animation: blinker3 1s ease-in-out infinite alternate;  
}
@keyframes blinker3 { to { opacity: 0; } }

X
Y
Z

Answer 4

Wenn Sie sanfte Animationen möchten, probieren Sie dies aus.

    .blink {
        animation: blinker 1s infinite;
    }

    @keyframes blinker {
        from { opacity: 1.0; }
        50% { opacity: 0.5; }
        to { opacity: 1.0; }
    }

    Ich blinke

Answer 5

Alternativ, wenn Sie keinen allmählichen Übergang zwischen Anzeigen und Ausblenden wünschen (z. B. einen blinkenden Textcursor), könnten Sie etwas Ähnliches verwenden:

/* Verwenden Sie auch Präfixe mit @keyframes und Animationen, um aktuelle Browser zu unterstützen */
@keyframes blinker {  
  from { visibility: visible }
  to { visibility: hidden }

  /* Alternativ können Sie dies tun:  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
  wenn Sie `alternate` nicht verwenden möchten */
}
.cursor {
  animation: blinker steps(1) 500ms infinite alternate;
}

Jede 1s wird .cursor von sichtbar auf versteckt wechseln.

Wenn CSS-Animation nicht unterstützt wird (z. B. in einigen Versionen von Safari), können Sie auf dieses einfache JS-Intervall zurückgreifen:

(function(){
  var show = 'sichtbar'; // Zustandsvariable durch Intervall umgeschaltet
  var time = 500; // Millisekunden zwischen jedem Intervall

  setInterval(function() {
    // Unseren sichtbaren Zustand bei jedem Intervall umschalten
    show = (show === 'versteckt') ? 'sichtbar' : 'versteckt';

    // Die Cursor-Elemente abrufen
    var cursors = document.getElementsByClassName('cursor');
    // Wir könnten das außerhalb des Intervall-Callbacks machen,
    // aber dann wäre es nicht mit dem DOM synchron

    // Durchlaufen Sie die Cursor-Elemente und aktualisieren Sie sie auf den aktuellen Zustand
    for (var i = 0; i < cursors.length; i++) {
      cursors[i].style.visibility = show;
    }
  }, time);
})()

Dieses einfache JavaScript ist tatsächlich sehr schnell und in vielen Fällen möglicherweise sogar eine bessere Standardeinstellung als CSS. Es ist erwähnenswert, dass viele DOM-Aufrufe JS-Animationen langsam machen (z. B. JQuery's $.animate()).

Es hat auch den zweiten Vorteil, dass wenn Sie später .cursor-Elemente hinzufügen, sie immer genau zur gleichen Zeit wie andere .cursors animiert werden, da der Zustand gemeinsam genutzt wird, was meines Wissens nach mit CSS unmöglich ist.