Imitowanie migającego tagu z animacjami CSS3

149

Naprawdę chcę, aby fragment tekstu migał w starym stylu bez używania javascript lub dekoracji tekstu.

Żadnych przejść, tylko * mrugnięcie *, * mrugnięcie *, * mrugnięcie *!


EDYCJA : To różni się od tego pytania, ponieważ proszę o mruganie bez ciągłych przejść, podczas gdy OP innych pytań pyta, jak zastąpić mruganie ciągłymi przejściami

m93a
źródło
1
Najlepsza odpowiedź , jaką znalazłem, została niestety usunięta przez oryginalny plakat @ m93a, więc nie można jeszcze na nią zagłosować. Myślę, że odpowiedź powinna być cofnięta i przegłosowana, ponieważ jest to najprostsze rozwiązanie, które daje najlepszy efekt mrugnięcia i działa we wszystkich aktualnych wersjach głównych przeglądarek . Możesz także przeczytać krótki wpis na blogu dotyczący tego samego rozwiązania w Emulation <blink> przy użyciu animacji WebKit CSS3 .
Nie rozumiem, dlaczego każda odpowiedź wydaje się mieć @-webkit-keyframesregułę po@keyframes regule bez prefiksu , a niektórzy mają nawet -webkit-animationdeklarację po tej bez prefiksu.
BoltClock
@BoltClock: To dlatego, że animacje CSS3 są stosunkowo nowe i nie są jeszcze stabilne w przeglądarkach Webkit. Tak zwany „prefiks” jest przeznaczony dla programistów, którzy chcą używać animacji, nawet jeśli są niestabilne i nie są ukończone.
m93a
@ m93a: Wiem o tym, ale pytam, dlaczego są umieszczane po nieprefikowanej regule, a nie przed nią (najwyraźniej nie umieściłem tego wyrażenia w moim oryginalnym komentarzu, mój błąd).
BoltClock

Odpowiedzi:

242

Oryginalny Netscape <blink>miał 80% cykl pracy. Jest to dość blisko, chociaż rzeczywiste <blink>dotyczy tylko tekstu:

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
This is <span class="blink">blinking</span> text.

Więcej informacji na temat animacji klatek kluczowych można znaleźć tutaj .

Neil
źródło
2
Tak, jest o wiele prostsze. Możesz dodać prefiks webkit, aby działał w Chrome i Safari.
m93a
2
To może nie działać w przeglądarce Chrome / Safari bez prefiksów Webkit.
David Pelaez
2
To, co lubię robić, to zamiast robić mrugnięcie klasą, robić mrugnięcie tagiem (z blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }). W ten sposób możesz po prostu użyć <blink>tagu zamiast <span class="blink">=)
416E64726577
Uwaga: jest to tylko "<blink> imitacja", o którą prosi PO. Nie można używać z colorwłaściwością ie jako animacją „włącz-wyłącz”.
Martin Schneider
97

Pokażę ci małą sztuczkę.

Jak powiedział Arkanciscan , możesz użyć przejść CSS3. Ale jego rozwiązanie wygląda inaczej niż oryginalny tag.

To, co naprawdę musisz zrobić, to:

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;
}
<span class="blink">Blink</span>

JSfiddle Demo

m93a
źródło
@ Czterdzieści dwa Przepraszamy, zapomniałem prefiksu -webkit- . Myślę, że zadziałało w przypadku wszystkich przeglądarek oprócz Chrome i Safari. Teraz po aktualizacji powinno działać w przeglądarkach Firefox, Chrome, Opera, Safari i MSIE10.
m93a
Jak napisano, ta odpowiedź rzeczywiście będzie działać w aktualnych wersjach przeglądarek Firefox, Chrome, Safari i IE .
2
Nie zadziałało z powodu literówki: w części Webkit brakowało nazwy animacji blink. Naprawiony.
Andrea Ligios
1
Działa dobrze, dzięki, oto moja implementacja oparta na Twoim rozwiązaniu: jsfiddle.net/gnx4mqc4
Hamid Behnam
1
@ m93a: 0% 100% { opacity: 1.0; }Sekcje wydają się zbędne, ponieważ są domyślne, prawda?
jamadagni
48

Wypróbuj ten CSS

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
} 
This is <span class="blink">blink</span>

Potrzebujesz prefiksów specyficznych dla przeglądarki / dostawcy: http://jsfiddle.net/es6e6/1/ .

Belyash
źródło
1
Nie ma nic lepszego niż -ms-animation lub -o-animation and -moz-animation w wersji 15, nie używajcie go teraz. Zajrzyj na caniuse.com, aby zobaczyć aktualne wsparcie. Przepraszam, ale nie przyjmuję tego pytania :( PS: Możesz użyć polecenia „edytuj” w odpowiedziach innych osób.
m93a
To tylko mój stary zły nawyk - dodaj sufiksy do wszystkich nowych właściwości CSS3. Zaktualizowana odpowiedź.
Belyash
to nie jest „mrugnięcie”, ale „blink-fadeOut”.
Martin Schneider
30

Właściwie nie ma potrzeby visibilitylub opacity- możesz po prostu użyć color, co ma tę zaletę, że „miga” tylko do tekstu:

blink {
    display: inline;
    color: inherit;
    animation: blink 1s steps(1) infinite;
    -webkit-animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }
Here is some text, <blink>this text will blink</blink>, this will not.

Skrzypce: http://jsfiddle.net/2r8JL/

SB
źródło
4
Wspaniale! To jedyne rozwiązanie, które zapewnia miganie tylko tekstem. Wszystkie inne rozwiązania również mrugają tłem elementu. Aby przetestować, użyj znaku <span>z białym na niebieskim tle na <body>zielonym tle. Tylko w tym rozwiązaniu niebieskie tło przęsła nie będzie migać.
jamadagni
10

Idę za to do piekła:

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content


+keyframes(blink)
  25%
    zoom: 1
    opacity: 1

  65%
    opacity: 1 

  66%
    opacity: 0

  100%
    opacity: 0

body
  font-family: sans-serif
  font-size: 4em
  background: #222
  text-align: center

  .blink
    color: rgba(#fff, 0.9)
    +animation(blink 1s 0s reverse infinite)
    +transform(translateZ(0))

.table
  display: table
  height: 5em
  width: 100%
  vertical-align: middle

  .cell
    display: table-cell
    width: 100%
    height: 100%
    vertical-align: middle

http://codepen.io/anon/pen/kaGxC (sass z bourbonem)

airtonix
źródło
1
Twój codepen generuje Undefined mixin 'experimental'.błąd, dlatego wygląda na to, że nie skompiluje się i nie wyświetli animacji migania.
6

Kolejna odmiana

.blink {
    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}
This is <span class="blink">blink</span>

Sasha Sofin
źródło
2

W moim przypadku działa migający tekst w odstępach 1s.

.blink_me {
  color:#e91e63;
  font-size:140%;
  font-weight:bold;
  padding:0 20px 0  0;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0.4; }
}
Ajay Kumar
źródło
-3

jeśli chcesz uzyskać efekt blasku, użyj tego

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

atom-text-editor::shadow  .bracket-matcher .region {
    border:none;
    background-color: rgba(195,195,255,0.1);
    border-bottom: 1px solid rgb(155,155,255);
    box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
    border-radius: 3px;
    animation: blink 2s steps(115, start) infinite;
    -webkit-animation: blink 2s steps(115, start) infinite;
}
minaretsbayonet
źródło
-5

Poniżej znajdziesz rozwiązanie dla swojego kodu.

@keyframes blink {
  50% {
    color: transparent;
  }
}

.loader__dot {
  animation: 1s blink infinite;
}

.loader__dot:nth-child(2) {
  animation-delay: 250ms;
}

.loader__dot:nth-child(3) {
  animation-delay: 500ms;
}
Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>

Vishal Kiri
źródło