Jak zrobić migający / migający tekst za pomocą CSS 3

Obecnie mam ten kod:

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

Miga, ale miga tylko „w jednym kierunku”. To znaczy, tylko zanika, a potem pojawia się ponownie opacity: 1.0, potem znowu zanika, pojawia się ponownie i tak dalej ...

Chciałbym, aby zanikło, a następnie „podniosło” to zanikanie z powrotem do opacity: 1.0. Czy to jest możliwe?

Najpierw ustawiasz, opacity: 1;a potem kończysz 0, więc zaczyna się 0%i kończy 100%, więc zamiast tego po prostu ustaw krycie na 0at, 50%a reszta sama się zajmie.

Próbny

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

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

<div class="blink_me">BLINK ME</div>

Tutaj mam ustawienie czasu animację 1 second, a następnie ja ustawienie timingsię linear. Oznacza to, że będzie stały przez cały czas. Wreszcie używam infinite. Oznacza to, że będzie trwać.

Uwaga: Jeśli to nie zadziała, prefiksy przeglądarek użycie podoba -webkit, -mozi tak dalej, zgodnie z wymogami animationi @keyframes. Możesz zapoznać się z moim szczegółowym kodem tutaj

Jak skomentowano, nie będzie działać na starszych wersjach Internet Explorera, a do tego musisz użyć jQuery lub JavaScript ...

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

^{Dzięki Alnitak za zaproponowanie lepszego podejścia .}

Demo (migacz za pomocą jQuery)

Użyj alternatewartości dla animation-direction(i nie musisz dodawać żadnych ramek w ten sposób).

alternate

Animacja powinna odwracać kierunek w każdym cyklu. Podczas odtwarzania do tyłu kroki animacji są wykonywane do tyłu. Ponadto funkcje taktowania są również odwrócone; na przykład animacja łagodności jest zastępowana animacją łagodności podczas odtwarzania w odwrotnej kolejności. Liczenie do ustalenia, czy jest to parzysta czy nieparzysta iteracja, rozpoczyna się od jednego.

CSS :

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

I usunęliśmy fromklatkę. Jeśli go brakuje, jest generowany na podstawie wartości ustawionej dla właściwości animowanej ( opacityw tym przypadku) na elemencie lub, jeśli go nie ustawiłeś (aw tym przypadku nie ustawiłeś), na podstawie wartości domyślnej (który jest 1dla opacity).

I proszę, nie używaj tylko wersji WebKit. Dodaj również nieprefiksowany jeden po nim. Jeśli chcesz po prostu napisać mniej kodu, użyj skrótu .

Najlepszy sposób na uzyskanie czystego „100% włączenia, 100% zniżki”, podobnie jak stare, <blink>wygląda następująco:

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

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

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

Alternatywnie, jeśli nie chcesz stopniowego przechodzenia między pokazem a ukrywaniem (np. Migający kursor tekstowy), możesz użyć czegoś takiego:

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

Każdy 1s .cursorprzejdzie od visibledo hidden.

Jeśli animacja CSS nie jest obsługiwana (np. W niektórych wersjach Safari), możesz wrócić do tego prostego interwału 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);
})()

Ten prosty JavaScript jest w rzeczywistości bardzo szybki i w wielu przypadkach może nawet być lepszym domyślnym niż CSS. Warto zauważyć, że wiele wywołań DOM powoduje spowolnienie animacji JS (np. $ .Animate () JQuery'ego).

Ma również drugą zaletę, że jeśli dodasz .cursorelementy później, będą one animowane dokładnie w tym samym czasie, co inne .cursors, ponieważ stan jest współdzielony, o ile wiem, jest to niemożliwe z CSS.

Nie wiem dlaczego, ale animowanie tylko visibilitywłaściwości nie działa w żadnej przeglądarce.

Możesz animować opacitywłaściwość w taki sposób, że przeglądarka nie ma wystarczającej liczby ramek, aby zanikać lub pomijać tekst.

Przykład:

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>

Zmień czas trwania i krycie, aby dopasować.

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

Późno, ale chciałem dodać nową z większą liczbą klatek kluczowych ... oto przykład na CodePen, ponieważ wystąpił problem z wbudowanymi fragmentami kodu:

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

Działa to dla mnie za pomocą class = blink dla odpowiednich elementów

Prosty kod JS

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