So erstellen Sie mit CSS 3 blinkenden / blinkenden Text

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, aber es blinkt 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 von diesem Ausblenden wieder auf "angehoben" wird opacity: 1.0. Ist das möglich?

Sie stellen zuerst ein opacity: 1;und beenden es dann 0, sodass es beginnt 0%und endet. Setzen Sie 100%stattdessen einfach die Deckkraft auf 0at, 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 stelle ich die Animationsdauer auf 1 secondund dann timingauf ein linear. Das heißt, es wird durchgehend konstant sein. Zuletzt benutze ich infinite. Das heißt, es wird weiter und weiter gehen.

Hinweis: Wenn dies nicht für Sie arbeitet, Präfixe bedienbare Browser wie -webkit, -mozund so weiter , wie es für animationund @keyframes. Sie können auf meinen ausführlichen Code verweisen hier

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

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

^{Vielen Dank an Alnitak für den Vorschlag eines besseren Ansatzes .}

Demo (Blinker mit jQuery)

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

alternate

Die Animation sollte bei jedem Zyklus die Richtung umkehren. Bei umgekehrter Wiedergabe werden die Animationsschritte rückwärts ausgeführt. Zusätzlich werden auch die Timing-Funktionen umgekehrt. Beispielsweise wird eine Easy-In-Animation bei umgekehrter Wiedergabe durch eine Easy-Out-Animation ersetzt. Die Anzahl, um festzustellen, 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 fromKeyframe entfernt. Wenn es fehlt, wird es aus dem Wert generiert, den Sie für die animierte Eigenschaft ( opacityin diesem Fall) für das Element festgelegt haben, oder, wenn Sie es nicht festgelegt haben (und in diesem Fall nicht), aus dem Standardwert (welches ist1 für opacity).

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

Der beste Weg, um einen reinen "100% ein, 100% aus" -Blink zu erhalten, wie der alte, <blink>ist folgender:

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

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

<div class="blink">BLINK</div>

Wenn Sie keinen schrittweisen Übergang zwischen Ein- 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 .cursorwird von visiblebis gehen 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 tatsächlich sehr schnell und in vielen Fällen sogar ein besserer Standard als das CSS. Es ist erwähnenswert, dass es viele DOM-Aufrufe sind, die JS-Animationen verlangsamen (z. B. JQuerys $ .animate ()).

Es hat auch den zweiten Vorteil, dass .cursorElemente, die später hinzugefügt werden, immer noch genau zur gleichen Zeit animiert werden wie andere .cursors, da der Status gemeinsam genutzt wird. Dies ist meines Wissens mit CSS unmöglich.

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

Sie können die opacityEigenschaft 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>

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

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

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

.blink {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  animation: blinker 2s linear infinite;
  background-color: red;
  margin-right: 5px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<div class="content">
  <i class="blink"></i>
  LIVE
</div>

Spät, wollte aber einen neuen mit mehr Keyframes hinzufügen ... hier ist ein Beispiel für CodePen, da es ein Problem mit den integrierten Codefragmenten 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>

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

Es funktioniert bei mir mit class = blink für die jeweiligen Elemente verwendet wird.

Einfacher JS-Code

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