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

288

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?

ojek
źródło
1
Po prawej stronie tej strony znajduje się kolumna zatytułowana Powiązane z wieloma „pokrewnymi” tematami. Spójrz na niektóre z nich .. będziesz mógł przestudiować wszystko, czego potrzebujesz.
Milche Patern
2
Możesz wziąć szybki kurs na temat przejścia css na bradshaw: css3.bradshawenterprises.com
Milche Patern
82
Bez obrazy, jeśli chce mrugnąć tekstem, chce mrugnąć tekstem. Nie ma znaczenia, który jest rok. Najbardziej innowacyjnymi ludźmi na świecie są ci, którzy nie żyją według zasad. Wręcz przeciwnie, zwykle je łamią, a następnie wszyscy je kopiują. Myślę, że Apple jest świetnym przykładem. Podobnie jak Mackie itp. Czułbym się lepiej, gdyby ludzie po prostu zachowali swoje opinie dla siebie i po prostu odpowiedzieli na pytanie: -) Jak już powiedziano, bez obrazy. Brzmi trochę szorstko, ale nie chcę prowokować nikogo. Bez urazy. ;-)
Lawrence
2
Możliwy duplikat Imitating a blink tag z animacjami CSS3
Michael Freidgeim
Możliwy duplikat
użycia

Odpowiedzi:

658

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)

Pan Alien
źródło
7
Właśnie zauważyłem, że to, zastosowane do jednego elementu tekstowego, zużywa absurdalną ilość procesora na moim komputerze za pomocą Firefoxa. Strzec się.
Alex
2
najlepsza odpowiedź na to, że jest najłatwiejszym do zrozumienia rozwiązaniem dostępnym
srebrny srebro
4
@ Mr.Alien, nie ma synchronizacji między nimi - zanikanie potrwa nieco dłużej niż timer (i timery i tak nie są niezawodne) i ostatecznie prawdopodobnie skończy się z nieograniczoną kolejką animacji w kolejce na elemencie. Prawidłowym podejściem byłoby obejście się bez timera i „rekurencyjnego” połączenia blinkerjako oddzwanianie kończące .fadeInpołączenie.
Alnitak
3
@ Mr.Alien również cała sprawa może być po prostu IIFE - ta jedna linia zrobi wszystko, łącznie z początkowym wywołaniem: (function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
Alnitak
2
step-endzamiast lineartego chciałem.
Alex S
71

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 .

Ana
źródło
Jak sprawić, by mrugał szybciej? Zmiana 1.7s to popsuła.
Alex G
1
@AlexG możesz wymienić cubic-bezierczęść ease-in-outlub coś innego: cubic-bezier.com
Danilo Bargen
+ Jeden za sześcienny bezier, ponieważ wszystkie interesujące rzeczy są nieliniowe
Agnius Vasiliauskas
57

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>

Timmmm
źródło
5
Jedyne prawdziwe rozwiązanie „mrugnięcia”. A także działa z colorwłaściwością itp. Inne rzeczy to obejścia lub animacje „zanikania”.
Martin Schneider
15

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.

MattSturgeon
źródło
Działa to dobrze Z WYJĄTKIEM dla Safari na iOS. Wszelkie pomysły, jak uruchomić go w przeglądarce Safari?
Joe Orost,
@JoeOrost Dołączyłem alternatywną wersję JS dla przeglądarek, które nie obsługują animacji CSS. Moim zdaniem może to być ogólnie lepsze rozwiązanie!
MattSturgeon,
14

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>

josketres
źródło
2
To głupie - po prostu użyj step-start(zobacz moją odpowiedź).
Timmmm,
Idealnie, właśnie tego szukałem. Kciuki w górę.
Samuel Ramzan,
9

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; } 
}
James Hilliard
źródło
9
@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

onon15
źródło
4

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>

hsobhy
źródło
0
<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>
Shahaji
źródło
0

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);
Alfa
źródło