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

.neon {
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 8px yellow;
  animation: blinker 6s;
  animation-iteration-count: 1;
}
@keyframes blinker {
  0% {
    opacity: 0.2;
  }
  19% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  21% {
    opacity: 1;
  }
  22% {
    opacity: 0.2;
  }
  23% {
    opacity: 0.2;
  }
  36% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
  41% {
    opacity: 0;
  }
  42% {
    opacity: 1;
  }
  43% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

I used font-family: "Quicksand", sans-serif;

This is the import of the font (goes on the top of the style.css)

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");

Answer 2

Dies ist ein gutes Beispiel für jeden. Probiere es einmal aus

.blinking_live {
    Höhe: 15px;
    Breite: 15px;
    Border-radius: 15px;
    Hintergrund: #58C03D;
    Animation: blink-live 1s Kubische-Bezier(0, 0.2, 0.8, 1) unendlich;
}

@keyframes blink-live{

    0% { Opazität: 1.0; }
    50% { Opazität: 0.0; }
    100% { Opazität: 1.0; }
}

Answer 3

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

    $(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);
    });

Answer 4

Es funktioniert für mich, indem Sie class=blink für das/die entsprechende(n) Element(e) verwenden

Einfacher JS-Code

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // Wenn Sie einfachen Schwarz/Weiß-Blinktext möchten
        $(".blink").css("visibility","hidden"); // Dies ist für die Sichtbarkeit des Elements  

        },900);

        //$(".blink").css("color","rgba(0,0,0,1)");  // Wenn Sie einfachen Schwarz/Weiß-Blinktext möchten
        $(".blink").css("visibility","visible");  // Dies ist für die Sichtbarkeit des Elements

        },1000);