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

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

  LIVE

Answer 2

Ich weiß nicht warum, aber das Animieren nur der Sichtbarkeit Eigenschaft funktioniert in keinem Browser.

Was du tun kannst ist, die Opazität Eigenschaft so zu animieren, dass der Browser nicht genug Frames hat um den Text ein- oder auszublenden.

Beispiel:

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}

Ich bin blinkender Text

Answer 3

Meine Lösung:

.blink {
 animation: blinkMe 2s linear infinite;
}
@keyframes blinkMe {
 0% {
  opacity: 0;
 }
 50% {
  opacity: 1;
 }
 100% {
  opacity: 0;
 }
}

Blinken

Ich verwende blinkMe für den Namen der Animation, 2s für die Dauer, linear für die Zeitabläufe und endlos, damit sie für immer wiederholt wird.

Wir müssen JavaScript und jQuery für ältere Browser verwenden, da sie keine Animationen und/oder @keyframes unterstützen:

$(document).ready(function() {
 window.setInterval(function() {
  $(".blink").fadeIn(1000).fadeOut(1000);
 }, 2000)
});

Blinken

Wenn Sie einen Blink-Effekt erstellen möchten, der genauso funktioniert wie das blink-Tag, dann funktioniert dies:

.blink {
 animation: blink 0.5s step-start infinite;
}
@keyframes blink {
 0% {
  opacity: 1;
 }
 50% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}

Blinken

Ändern Sie die Dauer, wenn Sie die Geschwindigkeit anpassen möchten.

Answer 4

Dauer und Deckkraft anpassen.

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

Answer 5

Spät, aber ich wollte ein neues mit mehr keyframes hinzufügen... hier ist ein Beispiel auf CodePen, da es ein Problem mit den integrierten Code-Schnipseln gab:

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

  Flash Me Hard