web-dev-qa-db-de.com

Wie kann man mit CSS 3 blinkenden/blinkenden Text erstellen?

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: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

Es blinkt, blinkt jedoch nur in eine Richtung. Ich meine, es wird nur ausgeblendet und dann erscheint es wieder mit opacity: 1.0, dann wieder ausgeblendet, erscheint wieder und so weiter ... Ich möchte, dass es ausgeblendet wird, und dann "heben" wird, um wieder zu opacity: 1.0 . Ist das möglich?

207
ojek

Sie setzen zunächst opacity: 1; und beenden sie dann mit 0. Sie beginnt also mit 0% und endet mit 100%. Setzen Sie stattdessen einfach die Deckkraft auf 0 um 50% und der Rest kümmert sich um sich selbst.

Demo

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

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

Hier sollte die Dauer der Einstellung der Animation 1 second sein, als würde die Einstellung timing auf linear gesetzt werden, das heißt, sie wird durchgehend konstant sein, und das letzte Mal, wenn infinite verwendet wird, bedeutet, dass sie immer weitergeht.

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


Wie bereits erwähnt, funktioniert dies nicht mit älteren Versionen von Internet Explorer, dafür müssen Sie jQuery oder JavaScript verwenden.

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

Danke an Alnitak für den Vorschlag eines besseren Ansatzes .

Demo(Blinker mit jQuery)

502
Mr. Alien

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

alternate

Die Animation sollte bei jedem Zyklus die Richtung ändern. Bei der umgekehrten Wiedergabe werden die Animationsschritte rückwärts ausgeführt. Darüber hinaus sind auch Timing-Funktionen umgekehrt. Zum Beispiel wird bei einer Rückwärtswiedergabe eine einfache Animation durch eine einfachere Animation ersetzt. Die Zählung, die festlegt, 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 es fehlt, wird es aus dem Wert generiert, den Sie für die animierte Eigenschaft (in diesem Fall opacity) für das Element festgelegt haben, oder, wenn Sie es nicht festgelegt haben (und in diesem Fall nicht), vom Standardwert value (was 1 für opacity ist).

Und verwenden Sie bitte nicht nur die WebKit-Version. Fügen Sie auch das unpräfixierte hinzu. Wenn Sie nur weniger Code schreiben möchten, verwenden Sie die Abkürzung .

63
Ana

Der beste Weg, um einen reinen "100% Ein" -Blink zu erhalten, wie der alte <blink>, sieht folgendermaßen aus:

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

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

32
Timmmm

Wenn Sie keinen schrittweisen Übergang zwischen Anzeigen und Ausblenden wünschen (z. B. einen blinkenden Textcursor), können Sie alternativ Folgendes verwenden:

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

Jeder 1s.cursor wechselt von visible zu hidden.

Wenn die 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 = '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);
})()

Dieses einfache JavaScript ist eigentlich sehr schnell und in vielen Fällen sogar ein besserer Standard als CSS. Es ist erwähnenswert, dass viele DOM-Aufrufe JS-Animationen langsam machen (z. B. $ .animate () von JQuery).

Es hat auch den zweiten Vorteil, dass, wenn Sie später .cursor-Elemente hinzufügen, diese zu genau derselben Zeit wie andere .cursors animiert werden, da der Zustand geteilt wird. Dies ist meines Wissens mit CSS nicht möglich.

15
MattSturgeon

Ich weiß nicht warum, aber das Animieren nur der visibility-Eigenschaft funktioniert in keinem Browser. 

Sie können die opacity-Eigenschaft so animieren, dass der Browser nicht über genügend Frames verfügt, um den Text ein- oder auszublenden.

Beispiel:

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>

12
josketres

Ändern Sie die Dauer und Deckkraft entsprechend.

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

Später wollte ich aber ein neues mit mehr Keyframes hinzufügen ... hier ist ein Beispiel zu CodePen da es ein Problem mit den eingebauten Code-Snippets gab: 

    .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>
2
hsobhy
<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
Shahaji
.blink_me {
  animation: blinker 1s linear infinite;
}

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