Imitieren eines Blink-Tags mit CSS3-Animationen

149

Ich möchte wirklich, dass ein Textstück im Stil der alten Schule blinkt, ohne Javascript oder Textdekoration zu verwenden.

Keine Übergänge, nur * blink *, * blink *, * blink *!


BEARBEITEN : Dies unterscheidet sich von dieser Frage, da ich nach einem Blinken ohne kontinuierliche Übergänge frage , während das OP der anderen Fragen fragt, wie das Blinken durch kontinuierliche Übergänge ersetzt werden kann

m93a
quelle
1
Die beste Antwort, die ich dafür gefunden habe, wurde leider vom Originalposter @ m93a gelöscht, sodass sie noch nicht bewertet werden kann. Ich denke, die Antwort sollte nicht gelöscht und positiv bewertet werden, da dies die einfachste Lösung ist, die den besten Blinkeffekt erzielt, und in allen aktuellen Versionen der gängigen Browser funktioniert . Sie können auch einen kurzen Blog-Beitrag über dieselbe Lösung unter <Blinken> mithilfe von WebKit CSS3-Animation lesen lesen .
Was ich nicht verstehe, ist, warum jede einzelne Antwort hier die @-webkit-keyframesRegel nach der nicht festgelegten @keyframesRegel zu haben scheint , und einige haben sogar die -webkit-animationErklärung nach der nicht festgelegten Regel.
BoltClock
@BoltClock: Dies liegt daran, dass CSS3-Animationen relativ neu und in Webkit-Browsern noch nicht stabil sind. Das sogenannte "Präfix" ist für Entwickler gedacht, die Animationen verwenden möchten, auch wenn sie instabil und noch nicht fertig sind.
M93a
@ m93a: Ich weiß das, aber ich frage, warum sie nach der nicht festgelegten Regel und nicht davor stehen (anscheinend habe ich diese Formulierung nicht in meinen ursprünglichen Kommentar aufgenommen, mein Fehler).
BoltClock
1
Mögliches Duplikat von Wie erstelle ich blinkenden / blinkenden Text mit CSS3?
Brad Werth

Antworten:

242

Das ursprüngliche Netscape <blink>hatte ein Tastverhältnis von 80%. Dies kommt ziemlich nahe, obwohl das Reale <blink>nur Text betrifft:

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

Weitere Informationen zu Keyframe-Animationen finden Sie hier .

Neil
quelle
2
Ja, es ist viel einfacher. Sie können ein Webkit-Präfix hinzufügen, damit es in Chrome und Safari funktioniert.
M93a
2
Dies funktioniert unter Chrome / Safari ohne die Webkit-Präfixe möglicherweise nicht.
David Pelaez
2
Was ich gerne mache, ist, anstatt Blinken zu einer Klasse zu machen, Blinken zu einem Tag (mit blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }) zu machen. Auf diese Weise können Sie einfach das <blink>Tag anstelle von <span class="blink">=)
416E64726577
Hinweis: Dies ist nur die vom OP angeforderte "<blink> Nachahmung". Nicht verwendbar mit dh colorEigenschaft als "Ein-Aus" -Blink-Animation.
Martin Schneider
96

Lassen Sie mich Ihnen einen kleinen Trick zeigen.

Wie Arkanciscan sagte , können Sie CSS3-Übergänge verwenden. Aber seine Lösung sieht anders aus als das ursprüngliche Tag.

Was Sie wirklich tun müssen, ist Folgendes:

@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
quelle
@ Zweiundvierzig Entschuldigung, ich habe das Präfix -webkit- vergessen . Ich denke, es hat für alle aktuellen Browser außer Chrome und Safari funktioniert. Nach dem Update sollte es nun für Firefox, Chrome, Opera, Safari und MSIE10 funktionieren.
M93a
Wie geschrieben, funktioniert diese Antwort in der Tat in aktuellen Versionen von Firefox, Chrome, Safari und IE .
2
Funktionierte wegen eines Tippfehlers nicht: Im Webkit-Teil blinkfehlte der Name der Animation . Fest.
Andrea Ligios
1
Funktioniert gut, danke, hier ist meine Implementierung basierend auf Ihrer Lösung: jsfiddle.net/gnx4mqc4
Hamid Behnam
1
@ m93a: Die 0% 100% { opacity: 1.0; }Abschnitte scheinen überflüssig zu sein, da sie Standard sind, nein?
Jamadagni
48

Versuchen Sie dieses 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>

Sie benötigen browser- / herstellerspezifische Präfixe: http://jsfiddle.net/es6e6/1/ .

Belyash
quelle
1
Es gibt nichts Besseres als -ms-animation oder -o-animation und -moz-animation war nur in Version 15, benutze es jetzt nicht. Schauen Sie auf caniuse.com, um die tatsächliche Unterstützung zu sehen. Entschuldigung, aber ich werde diese Frage nicht akzeptieren :( PS: Sie können 'edit' für die Antworten anderer verwenden.
m93a
Es ist nur meine alte schlechte Angewohnheit - fügen Sie allen neuen CSS3-Eigenschaften Suffixe hinzu. Aktualisierte Antwort.
Belyash
Dies ist nicht "blink", sondern "blink-fadeOut".
Martin Schneider
30

Es besteht eigentlich keine Notwendigkeit für visibilityoder opacity- Sie können es einfach verwenden color, was den Vorteil hat, dass nur der Text "blinkt":

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.

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

SB
quelle
4
Wunderbar! Dies ist die einzige Lösung, die nur Text blinkt. Alle anderen Lösungen blinken auch im Hintergrund des Elements. Verwenden Sie zum Testen einen <span>Text mit Weiß auf Blau vor einem Text <body>mit grünem Hintergrund. Nur in dieser Lösung blinkt der blaue Hintergrund nicht.
Jamadagni
10

Ich werde dafür zur Hölle gehen:

=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 mit Bourbon)

airtonix
quelle
1
Ihr Codepen generiert einen Undefined mixin 'experimental'.Fehler und es sieht so aus, als würde er die Blinkanimation nicht kompilieren und anzeigen.
6

Eine andere Variante

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

In meinem Fall blinkt der Text im Abstand von 1 Sekunde.

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

Wenn Sie einen Glow-Effekt wünschen, verwenden Sie diesen

@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;
}
Minarettbayonet
quelle
-5

Nachfolgend finden Sie eine Lösung für Ihren Code.

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